我见过一些以角度初始化控制器的符号，它们是：
app.controller('nameCtrl', function($scope, ... ){})
和
app.controller('nameCtrl', ['$scope','...',function($scope,...){}])
两者都有效，但我在文档中找不到任何可以发现差异的内容，这还有关系吗？
我的Javascript
var app = angular.module('Demo', []);
app.controller('DemoCtrl', function ($scope) {
$scope.expr = "Test"
});
app.controller('Test', function ($scope) {
$scope.HELLO = "HEllo World";
});
我的马克
<body ng-controller="DemoCtrl">
<div ng-controller="{{expr}}">{{HELLO}}</div>
</body>
这不起作用.文档说ng-controller可以评估表达式.我做错了什么？
我在视图中加载了Angular控制器:
<div ng-controller="MyCtrl">
<p ng-bind-html="content"></p>
</div>
此部分被加载到不同的视图中,因此控制器被多次实例化.在控制器中,我正在检测位置变化:
angular.module('MyApp')
.controller('HintCtrl', function ($scope, $rootScope) {
$rootScope.$on('$locationChangeSuccess', function () {
alert("HI");
});
});
每次我改变我的位置时,每次加载控制器时都会触发一次.我怎么能只运行一次？
嗨,我有一个按钮,可以触发两个功能.有没有办法让updateDetails只在changeColor完成后运行？updateDetails当前正在使用旧颜色而不是更改的颜色来提取旧配置.
ng-click="changeColor(color.code); updateDetails()"
这是观点:
<div ng-controller="ColorsCtrl">
<div ng-controller="HeaderCtrl">
<div byo-header>
</div>
<div ng-repeat="color in colors" class="row">
<div class="small-12 columns">
<div ng-controller="ButtonsController">
<div class="button-group">
{{ isSelected(color.code) }}
<button ng-click="changeColor(color.code); updateDetails()" type="radio" class="button" ng-model="selectedColor" btn-radio="color.code">{{color.name}}</button>
</div>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="small-4 small-offset-4 columns">
<!-- Proceed to packages if available -->
<a ng-if="hasPackage" href="#/packages/{{modelCode}}" class="button">Packages</a>
<!-- Proceed to options if packages not available -->
<a ng-if="!hasPackage" href="#/options/{{modelCode}}" class="button">Options</a>
</div>
</div>
</div>
</div>
这是ColorsCtrl中的changeColor():
$scope.changeColor = function(newColorCode){
//swap previous selected …使用AngularJS中的标准控制器语法,您可以观察变量,如:
$scope.$watch(somethingToWatch, function() { alert('It changed!'); });
使用controllerAs语法,我想对活动控制器中的此更改做出反应.最简单的方法是什么？
更多细节,如果它有帮助.我在侧窗格中有一个控制器来控制应用程序的上下文(用户选择,开始时间,结束时间等).因此,如果用户更改为不同的上下文,主视图应该做出反应并更新.我将上下文值存储在工厂中,每个控制器都注入该工厂.
我已经看到控制器以两种方式声明,如下所示.但这有什么不同呢？
appmodule.controller('Actrl',['$scope',function($scope) {}]);appmodule.controller('Actrl',function($scope) {});但是,大多数时候,第一次不起作用.为什么？
为什么我无法控制输出$ scope值？我正在尝试从页面中提取用户指定的值并在控制器中检索.最终我想将此传递给服务,以便多个控制器可以访问这些数据.
HTML
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- CDN lib files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.min.js"></script>
<!-- custom angular script -->
<script src="js/app.js"></script>
</head>
<body>
<div class="container">
<div ng-controller="mainController">
<h1>Hello world!</h1>
<label> Please enter something</label>
<input textarea ng-model="name"></input>
<h4> This is what you entered : {{ name }} </h4>
<h4 style=color:red> now filtering: {{ lower() }}</h4>
</div>
</div>
</body>
</html>
APP.JS
var myApp …javascript angularjs angularjs-scope console.log angularjs-controller
我很疯狂,这是一个小东西,但我找不到解决方案...我有这个js文件(angularjs应用程序在html文档的开头初始化)
app.controller('slidingMenuCtrl', function($scope) {
$scope.categories = [
{title: 'Festas', icon: 'ion-ios-pint', notifications: 3},
{title: 'Palestras', icon: 'fa-microphone', notifications: 0}
];
$scope.test = 'aaa';
});
在我的HTML中的某个地方
<ons-template id="menu.html" ng-controller="slidingMenuCtrl">
<ons-page>
<div ng-repeat="x in categories">
{{x.title}}
</div>
<div>
{{test}}
</div>
</ons-page>
</ons-template>
带有ng-repeat的div显示什么,但是没有它的那个显示'aaa'正确,为什么？
javascript angularjs angularjs-ng-repeat angularjs-controller onsen-ui
我有一个嵌套在另一个控制器中的控制器。
<div ng-controller="manufacturerController" ng-cloak>
<div ng-controller="contractController" ng-cloak>
<div data-ng-if="item" class="panel panel-default">
<div class="panel-heading text-center">
<span class="h3">Contract</span>
</div>
</div>
</div>
<button data-ng-if="item && !ajaxOut" class="btn btn-success" data-ng-click="saveItem()">Save</button>
</div>
saveItem() 通过按钮调用，代码在制造商控制器中：
$scope.saveItem = function () {
$scope.ajaxOut = true;
$scope.saveContracts();
};
但是函数 saveContracts() 在 contractController 中。我想从manufacturerController.saveItem() 调用contractController.saveContracts()。
根据这里我应该能够很好地调用父方法：How to call a function from another controller in angularjs?
但是保存会冻结浏览器。我做错了什么，我该如何解决？
我试图用我的AngularJS控制器调用一个函数,代码如下:
控制器代码
(function () {
var hello = angular.module("helloApp", []);
hello.controller("HelloCtrl", ["$http", "$scope", function($scope, $http) {
console.log("in controller");
$scope.test = function() {
console.log("in test function");
$http.get("/test").success(function(data) {
console.log("success");
})
.error(function(data) {
console.log("error");
});
};
} ]);
})();
HTML
<!DOCTYPE html>
<html ng-app="helloApp">
<head>
...
</head>
<body ng-controller="HelloCtrl">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="test()">Search</button>
</div>
</div>
</form>
</div>
...
</body>
当我启动应用程序时,我看到了消息"in controller",正如我所料.但是,如果我单击提交按钮,那么我看不到任何其他三个控制台消息.
我错过了什么？