Question

我编写了一个名为getDepth（object）的函数，它给了我一个对象的深度，然后返回一个字符串，例如，如果对象的深度为3，它将返回字符串“sub-sub-sub”，并且在我的指令模板中，我想从ng-class调用该函数，例如

'<span ng-class="getDepth(item)">{{item.content}}</span>'

但我不知道在我的指令中将该函数放在何处，是否只是在链接函数内？

Answer 1

这通常是控制器的工作。因此，您可以在指令中创建一个匿名控制器并将其放置在那里，或者在父控制器的范围内查找这段代码 - 假设当然存在一个。

也许您希望稍后在应用程序中重用此功能，因此我建议将其置于控制器树上以允许其他人继承其功能。

链接器函数job是严格的DOM操作，这不是DOM操作，这是一个返回字符串的函数，而ng-class指令依次执行DOM操作。

如果您查看文档：

想要修改DOM的指令通常使用链接选项。 link采用具有以下签名的函数，函数链接（范围，元素，attrs）{...}其中：

  .directive('myCurrentTime', function($interval, dateFilter) {

    function link(scope, element, attrs) {
      var format,
          timeoutId;

      function updateTime() {
        element.text(dateFilter(new Date(), format));
      }...

正如您所看到的，链接功能正在改变DOM。

所以回答这个问题，这就是指令的结构。

app.directive('myDirective', function() {

    var controller = function($scope) {
      $scope.getDepth = function (item) {
          return "text-success";
        };    
    }

    return {
      template: '<span ng-class="getDepth(item)">{{item.content}}</span>',
      scope: {item: '='},
      controller: controller // or this can be the name of an outside reference controller as well - which i prefer for unit testing and reusability purposes. 
      }
    };
  }
]);

Answer 2

如果你想把这个控件放到你的指令而不是控制器你可以把它放在链接函数中，一个示例指令应该是这样的......

app.directive('myDirective', ['$compile',
  function($compile) {
    return {
      template: '<span ng-class="getDepth(item)">{{item.content}}</span>',
      scope: {item: '=item'},
      link: function(scope, element, attrs) {
        scope.getDepth = function (item) {
          return "text-success";
        };
      }
    };
  }
]);

这里是PLUNKER

使用自定义函数作为表达式

2 个答案: