我想知道这两种创建控制器的方法的用例是什么:
使用ngController:
myApp.controller('myController', ['$scope', function ( $scope ) {
}]);
使用controller属性在指令内构造控制器:
myApp.directive ( 'myDirective', [ '$window', function( $window ) {
return {
restrict: 'A',
controller: [ '$scope', function( $scope ) {
}],
link: function( scope, element, attrs ) {
}
};
}]);
如果在同一个元素上调用控制器,你有没有理由不在指令中构造控制器？
这只是控制器的广泛使用/复杂程度的问题吗？
如何将我选中的项目存储在带有其他控制器的复选框中？
我的尝试(请参阅plnkr查看视图):
var myApp = angular.module('myApp', []);
myApp.factory('CooSelection', function () {
return {selectedCoo: []}
})
function CooListCtrl($scope, CooSelection) {
$scope.coos = {"Coos": ["spark", "nark", "hark", "quark"]};
$scope.coo_list_selection = CooSelection;
$scope.checkSelection = function (item) {
if ($scope.coo_list_selection.indexOf(item) === -1) {
$scope.coo_list_selection.push(item);
} else {
$scope.coo_list_selection.splice($scope.coo_list_selection.lastIndexOf(item), 1);
}
}
}
CooListCtrl.$inject = ['$scope', 'CooSelection'];
function DebugCooList($scope, CooSelection) {
$scope.coo_selection = CooSelection;
}
DebugCooList.$inject = ['$scope', 'CooSelection'];
javascript angularjs angularjs-directive angularjs-scope angularjs-controller
我有这段代码:
<ul>
<li ng-repeat="message in messages">
<button ng-click="send()">Send</button>
</li>
</ul>
$scope.send = function(){
// not working (message undefined)
alert($scope.message.text);
// working
alert($scope.messages[0].text);
};
我不懂为什么:
alert($scope.message.text);
不起作用.我认为ng-repeat正在创造一个新的范围.
我的HTML中有一个" ng-init "指令,它在我的Angular.js数据模型中初始化" data.id " 的值.我们现在说,我无法改变其运作方式.
现在,我希望在页面加载后立即发出HTTP请求,其中URL将取决于此data.id值.到目前为止,以下似乎有效:
app.controller('MainCtrl', function ($scope, $http, $timeout) {
"use strict";
$scope.data = {};
$timeout(function () {
$http.get("/api/Something?id=" + $scope.data.id);
}, 0);
});
但是,使用超时为零的计时器似乎很笨拙.(如果我省略$ timeout代码并直接调用$ http.get,那么$ scope.data.id当然是未定义的).
在发出$ http请求之前,有没有更好的方法等待ng-init执行？以上基于超时的代码是否适用于所有情况/所有浏览器等？
我正在尝试使用Angular创建Metro Tile类型网格,为了实现这一点,我希望每个tile都是不同的颜色.所以我的行动计划是创建一个随机选择循环内部颜色的函数(使用ng-repeat).这是我到目前为止所拥有的......
<div class={{RandomColourClass()}} ng-repeat="stockRecord in GridStockRecords | filter:searchText">
<div >
<h6>{{stockRecord.ProductGroupName}}</h6>
</div>
</div>
因此,您可以看到我使用名为RandomColourClass的函数设置类名,这是JS位
$scope.TileColours = [{colour:'thumbnail tile tile-blue'},{colour:'thumbnail tile tile-green'},{colour:'thumbnail tile tile-red'}];
$scope.RandomColourClass = function(){
var randomColour = $scope.TileColours[Math.floor(Math.random() * $scope.TileColours.length)];
return randomColour.colour.toString();
};
这一切都很好,瓷砖有不同的颜色,但我不断收到以下错误
错误:达到$ $ digest()迭代.中止!".
我已经看过围绕这个问题的其他帖子,但我无法弄清楚我需要改变什么来让它工作!？任何帮助或方向将不胜感激:)
我是AngularJS的新手.使用数组参数声明的控制器之间的区别是什么,将依赖关系列为字符串和JavaScript名称,
app.controller("firstController", ['$scope', '$modal', '$log', 'HttpService', 'FisrtSharedService', 'SecondSharedService', function($scope, $modal, $log, HttpService, FisrtSharedService, SecondSharedService) {
}]);
...和这个表单,只列出JavaScript名称？
app.controller("firstController", function($scope, $modal, $log, HttpService, FisrtSharedService, SecondSharedService){
});
为什么第一个版本中的奇怪语法？
是否可以根据路由组动态加载控制器,它的js文件和模板？Psuedo代码不起作用:
$routeProvider.when('/:plugin', function(plugin) {
templateUrl: 'plugins/' + plugin + '/index.html',
controller: plugin + 'Ctrl',
resolve: { /* Load the JS file, from 'plugins/' + plugin + '/controller.js' */ }
});
我已经看到很多类似这样的问题,但是没有基于路由组加载js文件/控制器的问题.
我有以下测试:
it('Should keep location when user rejects confirmation', inject(function ($controller, $rootScope) {
var confirmStub = sinon.stub(),
eventStub = {
preventDefault: sinon.spy()
};
miscServiceStub = function () {
this.confirm = confirmStub;
};
confirmStub.returns(false);
initializeController($controller, 'Builder', $rootScope);
$rs.$broadcast('$locationChangeStart', eventStub);
expect(confirmStub).toHaveBeenCalledOnce();
expect(confirmStub).toHaveBeenCalledWith('Are you sure you want to leave? you will loose any unsaved changes.');
expect(eventStub.stopPropagation).toHaveBeenCalledOnce();
miscServiceStub = function () {};
}));
测试此代码:
$rootScope.$on('$locationChangeStart', function (event) {
dump(arguments);
if (!$miscUtils.confirm('Are you sure you want to leave? you will loose any unsaved changes.')){
event.preventDefault();
} …我想在点击按钮时访问屏幕上下一个项目的参数.
我在我的html文件中使用ng-repeat:
<li ng-repeat="item in items | filter:query" ng-show="isSelected($index)">
<a href="" ng-click="itemNext()"><img src="xxx.jpg" /></a>
</li>
和我的控制器中的索引循环:
$scope.itemNext = function () {
$scope._Index = ($scope._Index < $scope.nbItems - 1) ? ++$scope._Index : 0;
$scope.functionToCallWithNextItem(nextItem.param1);
};
一个简单$scope.items[$scope._Index].param1的,而不是nextItem.param1作为数据进行过滤,这样是行不通$index+1的$scope.items不一定是好的.
任何的想法 ？
我熟悉以下方法来实现控制器之间的通信.
还有其他人吗？有更好的方法/最佳实践吗？
$broadcast/$emit.controller("Parent", function($scope){
$scope.$broadcast("SomethingHappened", {..});
$scope.$on("SomethingElseHappened", function(e, d){..});
})
.controller("Child", functions($scope){
$scope.$broadcast("SomethingElseHappened", {..});
$scope.$on("SomethingHappened", function(e, d){..});
})
.controller("AnotherChild", functions($scope){
$scope.$on("SomethingHappened", function(e, d){..});
});
或者,从视图:
<button ng-click="$broadcast('SomethingHappened', data)">Do Something</button>
好处:
缺点:
$rootScope,使用<div ng-controller="Parent">
<div ng-controller="Child">
<div ng-controller="ChildOfChild">
<button ng-click="someParentFunctionInScope()">Do</button>
</div>
</div>
</div>
或者,在代码中
.controller("ChildOfChild", function($scope){
$scope.someParentFunctionInScope();
});
好处:
缺点:
$rootScope,使用$watch控制器仅响应范围暴露数据的变化,从不调用函数.
.controller("Parent", function($scope){
$scope.VM = {a: "a", b: "b"};
$scope.$watch("VM.a", function(newVal, oldVal){
// react
}); …