Question

所以我在同一个元素上有两个自定义过滤器，每个过滤器都有共享范围。我希望第二个指令读取元素文本，但事实是，元素文本是由第一个指令生成的。

app.directive('newEl', function($compile) {
    return {
        link: function($scope, element) {

        console.log("link element : ", element.text())

        }, controller: function($scope, $element) { 

        console.log("controller text ",$element.text())           
        }
      }     
});

Answer 1

首先，您可以尝试使用angular.element.ready。第二个是postLink。

Answer 2

您可以尝试使用$timeout它将确保在摘要周期后运行超时表达式并将数据绑定到DOM。由于您在同一元素上有ng-repeat，因此只有在绑定了数据后才能确保元素呈现。

  $timeout(function(){
     console.log("link element : ", element.text(), $scope.item)
  }, 0, false); //set false if you dont want to trigger a digest

但这样做很奇怪，你可以使用一个孤立的范围指令，并通过双向绑定绑定item的值。

在指令设置中：

 {
   scope:{item:'='}
 },

并在您的指令中将其作为$scope.item访问。您还可以使用controllerAs和bindToController并将item作为控制器实例的属性。避免访问控制器中的$element，您可以使用此技术。隔离范围可帮助您创建自包含组件，而不与消费者紧密耦合。

或者简单到将其设置为edit-text的属性，即

<td ... edit-text="item" ng-repeat="item in items">{{item}}</td>

并在你的指令中执行：

var item = $scope.$eval(attrs.editText);

此外，由于您的指令不创建范围，您也可以将其作为$scope.item访问，但不建议这样做，因为它不够明确，并且对父级有一些假设。

angular.module('app', []).run(function($timeout, $rootScope) {
  $timeout(function() {
    $rootScope.items = [1, 2, 3, 4, 5, 6, 7];
  }, 2000);

}).directive('editText', function($compile, $timeout) {
  return {
    link: function($scope, element, attrs) {
      console.log($scope.$eval(attrs.editText), $scope.item);
      $timeout(function() {
        console.log("link element : ", element.text())
      });

    },
    controller: function($scope) {


    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app">

  <div edit-text="item" ng-repeat="item in items">{{item}}</div>

</div>

呈现元素后的element.text（）

2 个答案: