Question

我创建了一个指令，我正在循环它。我遇到的问题是，由于某种原因，$ scope.name显示了最后一个指令的名称，即使我做了一个隔离范围

angular.module("testApp")
 .controller("testingCtrl","$scope",function($scope)       {
     infos =[
     {
       name ="test1"
     },
     {
       name ="test2"
     }
     ]
     $scope.init=function(name){
        $scope.name=name
     }
 })
 .controller("directiveCtrl",["$scope",function($scope){
        console.log("HEY",$scope.name);
 }])
 .directive("testing",function(){
    return{
      restrict:"E",
      controller:"directiveCtrl",
      scope:{
        name:"="
      },
      template:"<h1>{{name}}</h1>"
  }
})
<div ng-app="testApp">
   <div ng-controller="testingCtrl">
      <div ng-repeat="info in infos" ng-init="init(info.name)">
         <testing name="name"></testing>
      </div>
   </div>
</div>

所以它正在显示

TEST2

但我想要的是

TEST1

TEST2

感谢您的时间。

Answer 1

我不确定你为什么会遇到这些问题，但是当我试图复制你的问题时，我做了一个带有以下更改的codepen，因为我认为你没有完全复制你正在使用的Angular代码：

将ng-repeat设为info in infos （您的工作不正常）
将info.name传递给指令而不是{name:info.name}

这些更改导致输出

test1
test2

这是我的代码：http://codepen.io/anon/pen/JRKyAK?editors=1010#0

修改
通过您所做的编辑，您会遇到不同的问题。

您看到重复test2的原因是因为您在init(info.name)中为ng-init中的info调用infos，因为该初始函数每当Angular生成其中一个新div时，都会调用它问题在于，$scope.init每次$scope.name生成新的信息div时都会覆盖ng-repeat。这是导致您的最后一个元素始终显示的原因，因为您的指令被传递$scope.name，它将始终包含您的最后一个元素的名称。

我建议不要使用ng-init，而是将名称等信息属性直接传递到您的指令中，如下所示：

<testing name="info.name"></testing>

角度指令共享范围问题

1 个答案: