Javascript angularjs$范围和控制器_Javascript_Angularjs_Angularjs Scope

Javascript angularjs$范围和控制器

javascript angularjs

Javascript angularjs$范围和控制器,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我是angular的新手，我读过几篇关于scope和Controller的文章，但我想我还是不明白假设我们有一个代码 var myApp = angular.module("myApp", []); myApp.controller("myCtrl", function($scope) { $scope.array = [1,2,3]; $scope.show = false; $scope.toggle = function

我是angular的新手，我读过几篇关于scope和Controller的文章，但我想我还是不明白

假设我们有一个代码

    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 click=show=时，一切正常！在ng秀中表演。但当我使用toggle insted时，它不会。我的问题是如何更改代码以使方法切换生效？如何访问我在控制器中操作的实际范围？我应该在每个li标记上使用ng controller=myCtrl吗？对于由标记中的指令创建的每个作用域，我是否应该有一个控制器？

这里最好的做法是什么？

事情看起来奇怪的原因是ngRepeat使用了隔离作用域。这意味着它会在父范围之外创建一个新的子范围

当您使用show=！显示，您正在该子作用域上创建显示值

当您使用toggle时，您试图在不存在的作用域上调用一个方法

您可以尝试在单击事件上调用$parent.toggle，但这将在父作用域而不是单个行上设置显示值。

所说的是正确的，ngRepeat中的显示与myCtrl中的显示不同。然而，即使不是这样，myCtrl中也只显示一个变量，所以在切换时，每个项目都将隐藏并一起显示

如果要切换单个行，则每个行都需要自己的标志。有几种方法可以实现这一点。但为了避免视图中的逻辑过多，并避免使用$parent，一种方法是使用控制器作为语法，并保留一个显示标志列表，利用ngRepeat将数组索引作为$index提供的事实

然后是一种观点：

<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>

<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>

然后切换功能将是：

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($index)">Click here to show</a>
        <span ng-show="ctrl.show[$index]">Something to show</span>
    </li>
</ul>
</body>

<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>

编辑：这是每个人的一个便签

这个有点棘手，因为ng repeat为每个repeat子级创建了一个新的作用域。因此，toggle中的变量“show”将是父变量，但ng show中的“show”是子变量。我认为代码中的$partent将导致一些假设/依赖性。如果我想在其他视图中使用我的控制器，该怎么办？。还有和show呆在一起！显示，似乎是把逻辑放在许多地方。。。只是仍然不确定这里的最佳方法是什么……谢谢，这听起来对我来说很合理，只是想知道，让我们假设数组是我的域实体的集合，可以将这个人工属性显示附加到我的模型上吗？这是一种常见的做法吗？不，我认为这不是一种很好的做法。尽管它肯定会工作，但最好保持实体中没有任何显示逻辑。更好的方法可能是使用某种主标识符或对对象本身的引用在控制器中保留“显示”实体的列表。或者在我给出的对象数组示例中，用实体或实体的主标识符替换val的值。问题是，我一次只需要显示一个项，所以最好只存储索引，并以某种方式使用它，实际上不需要数组。您如何看待将ng controller=myCtrl与ng repeat放在一起，从而使作用域工作。。。。但我不知道后果是什么；