在ngRepeat内部时，如何从Angular中的指令向$scope添加新属性

我在ng repeat中有一个指令。此指令生成一个唯一命名的属性，并将其设置为从服务器检索为JSON的对象。我会在一个给定的页面上有多个ng重复部分，里面有我的自定义指令

在这个页面的主控制器中，我需要响应这些指令中的事件，并更新页面上的其他元素。我不能完全控制事件（它们是第三方控制），所以我不能真正修改它们的参数或任何东西。此指令创建的属性包含我需要从控制器中获得的信息，以便决定如何响应它们。

当我在主控制器上激发事件时，在$scope上看不到这些新属性。如果我把元素从ng重复中移出，我确实看到了它们。我的指令没有使用隐藏范围。

下面是我正在做的一个简单版本：

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  <script>
    var app = angular.module('TestApp', []);

    app.controller('TestController', ['$scope', function($scope) {
      $scope.list = [];
      $scope.list.push({ sample: "item" });
      console.log('controller called');
      $scope.doSomething = function() {
        console.log('doSomething called');
        console.log($scope["myVariable"]);
        $scope.list = [];
        $scope.list.push({ sample: "item" });
      };
    }]);
    app.directive('testDirective', ['$http', function ($http) {
      return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrib) {
          var setValue = function() {
            scope["myVariable"] = "TEST!" + Date();
            console.log('myVariable is set.'); 
          };
          setValue();
        }
      };
    }]);
  </script>
  </head>
  <body ng-app="TestApp">
    <div ng-controller="TestController">
      <div >
        <div ng-repeat="item in list" >
          <a href="#" test-directive ng-click="doSomething()">Click</a>  
        </div>
      </div>
    </div>
  </body>
</html>

这是Plunker 上的相同代码

你能帮助理解为什么会发生这种情况吗？

我在这里看到了其他问题的两个可能的解决方案——第一，我可以创建一个由该指令共享的控制器。这并不理想，因为我需要能够以不同的方式连接这些指令。其次，我发现我可能会使用一个服务来共享这些数据，因为它是一个单例，但这有点困扰我——我真的更希望它保持"本地"，而不是这个控制器/作用域（但我可能别无选择）。

您不应该直接访问指令中的父作用域项。应该传入要设置或修改的变量。

scope: {
  'testDirective': '='
},
link: function (scope, element, attrib) {
  var setValue = function() {
    scope.testDirective = "TEST!" + Date();
    console.log('myVariable is set.'); 
  };
  setValue();
}

该属性中应该始终有一个点。

<a href="#" test-directive="data.myVariable" ng-click="doSomething()">Click</a>

现在在控制器上可用作data.myVariable

Plunkr

相关内容

最新更新

热门标签：