angularjs $作用域和控制器
[英]angularjs $scope and controller
問題描述
我對angular並不陌生，我已經閱讀了幾篇關於范圍和控制器的文章，但我認為我仍然不明白。
可以說我們有一個代碼
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.array = [1,2,3];
$scope.show = false;
$scope.toggle = function (){
$scope.show = !$scope.show;
console.log($scope.show);
};
});
和標記：
<body ng-app="myApp">
<ul ng-controller="myCtrl">
<li ng-repeat="n in array">
<a href="#" ng-click="show = !show">Click here to show</a>
<span ng-show="show">Something to show</span>
</li>
</ul>
</body>
當我在ng-show中使用“ ng-click =” show =！show“時，一切正常。但是，當我使用toggle（）插入時，它卻沒有。我的問題是如何更改代碼以使方法toggle（）工作？如何訪問比我在控制器中操作的實際作用域更大的范圍？我應該在每個li標簽上使用ng-controller =“ myCtrl”嗎？我應該為標記中的指令所創建的每個范圍都擁有一個控制器嗎？最佳做法是什么？
2 個解決方案
解決方案1
0 2014-11-13 17:51:02
事情看起來很奇怪的原因是ngRepeat使用隔離范圍。 這意味着它將從父級創建一個新的子級。
當使用show = !show ，您將在該子作用域上創建一個show值。
使用toggle ，您嘗試在不存在的作用域上調用方法。
您可以嘗試在click事件上調用$parent.toggle() ，但這將在父作用域而不是單個行上設置show值。
解決方案2
0 已采納 2014-11-13 18:44:46
什么正在說的是真的，在show里面ngRepeat是從不同的show中myCtrl 。 但是，即使不是， myCtrl也只show一個變量，因此切換時每個項目都將被隱藏並一起顯示。
如果要切換單個行，則每個行都需要有自己的標志。 有幾種方法可以完成此操作。 但是，為了避免視圖中的邏輯過多以及避免使用$parent ，一種方法是使用controller as語法，並保留顯示標志列表，同時利用ngRepeat提供的數組索引為$index 。
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function() {
var myCtrl = this;
myCtrl.array = [1,2,3];
myCtrl.show = [false, false, false];
myCtrl.toggle = function (index){
myCtrl.show[index] = !myCtrl.show[index];
console.log(myCtrl.show);
};
});
然后查看：
<body ng-app="myApp">
<ul ng-controller="myCtrl as ctrl">
<li ng-repeat="n in ctrl.array">
<a href="#" ng-click="ctrl.toggle($index)">Click here to show</a>
<span ng-show="ctrl.show[$index]">Something to show</span>
</li>
</ul>
</body>
如果您打算做一些很難跟蹤兩個數組的復雜操作，則也可以使用對象數組。 就像是：
myCtrl.array = [
{val: 1, show: false},
{val: 2, show: false},
{val: 3, show: false},
];
那么切換功能將是：
myCtrl.toggle = function(obj){
obj.show = !obj.show;
};
和視圖：
<body ng-app="myApp">
<ul ng-controller="myCtrl as ctrl">
<li ng-repeat="n in ctrl.array">
<a href="#" ng-click="ctrl.toggle(n)">Click here to show</a>
<span ng-show="n.show">Something to show</span>
</li>
</ul>
</body>
編輯：這是每個人的朋克。
了解angularJS中的控制器范圍
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.