Question

我有这个指令用于显示具有特定类别的所有照片：

<div ng-controller="CategoryController as c">
  <photo-set category="{{ c.category_name }}"></photo-set>
</div>

奇怪的是，模板在变量设置之前首先被渲染。因此，它认为属性为空。如果我对<photo-set category="animal">这样的属性进行硬编码，那么它可以正常工作。

代码中没有拼写错误，因为当我检查元素时，我可以看到那里打印的变量。

 .directive("photoSet", function() {
    return {
      restrict: "E",
      templateUrl: "views/photo-set.html",
      scope: {
        category: "@category"
      },
      controller: "SetController", // the controller to render the photos
      controllerAs: "s"
    };
  })

我的类别控制器：

.controller("CategoryController", function($routeParams) {
  this.category_name = $routeParams.category;
})

// the route is /c/:category

修改：The JSFiddle。在小提琴中，它无法使用scope: { category: "@category" }，因此我将其替换为scope: true

Answer 1

它非常依赖于您的模板代码。比如，没有“链接”或“编译”功能，因此不清楚如何在模板中使用category_name。尝试使用'='而不是'@'表达式将其作为对象传递，并仅通过范围使用它。为了更快的帮助，尝试发布样本小提琴

编辑：

如上所述，您的“指令模板代码”应该使用指令范围中设置的变量（在您的情况下，您的指令标记不同且<ul>标记不同，此<ul>标记应该是其中的一部分您的指令模板）：

  <photo-set category="c.category_name">
    <ul>
      <li ng-repeat="photo in s.photos">{{ photo.src }}</li>
    </ul>
  </photo-set>

应该是

  <photo-set category="{{category_name}}"></photo-set>

和<ul>应该是模板的一部分

请查看工作更新的小提琴： https://jsfiddle.net/Lp404d99/5/

有关执行流程的更多详细信息 http://jasonmore.net/angular-js-directives-difference-controller-link/

Angular - 指令在变量求值之前首先呈现？

1 个答案: