Question

我有一个看起来像这样的元素指令：

<ng-article data-article="{{object goes here}}"></ng-article>

并像这样使用：

data-article

这绝对没问题。但是现在，我希望访问通过指令传递的对象的一部分，并在它呈现之前对其进行处理。例如，如果{ category: "Going Out", id: "1234" }内的对象如下所示：

category

在指令中，我想访问var image = new Image(); image.onload = function() { // Image is ready }; image.src = imageURL;值，用连字符替换空格并将其全部更改为小写。指令中是否可以这样做？

我不想在控制器中执行此操作，因为该指令用于多个控制器。

Answer 1

您可以在使用指令中的链接功能呈现之前访问您的对象：

app.directive("ngArticle", [function(){
  return {
    restrict: "E",
    replace: true,
    templateUrl: "/partials/article.html",
    scope: { article: "=article" },
    link(scope, element, attrs) {
      ...
    }
  }
}]);

此外，范围不会在链接功能之前进行插值，因此您可以watch您的文章对象：

scope.$watch('article', function() {
    // do your transformations here
}

请记住在指令销毁之前清理您的观察者，这可以防止内存泄漏

scope.$on('$destroy', function () {
    // clean up watchers here
});

Angular指令

1 个答案: