Question

我正在尝试构建帖子提要，其中post对象指定了一个类型值，然后指定帖子的模板。我有一个自定义指令，但我遇到了问题。

JS

  myApp.controller('FeedCtrl', function ($scope, $http) {
    $scope.posts = [
      {'title': 'Post 1',
       'type': 'post',
       'snippet': 'Vim id noster platonem definitionem...',
      }
    ];
  });    

  myApp.directive('myPost', function () {
    return {
     restrict: 'E',
      scope: {
        title: '=',
        type: '=',
        snippet: '=',
      },

      templateUrl: function(elem, attr){
        return './templates/'+attr.type+'.html'
      }
    };
  });

HTML

<div ng-controller="FeedCtrl">
 <div ng-repeat="post in posts">
  <my-post title='post.title' type='post.type' snippet='post.snippet'></my-post>
 </div>
</div>

不起作用......但是当我将类型attr更改为

时

<my-post type="post"></my-post>

它可以工作并将所有范围数据传递到post.html模板。有什么区别？为什么它没有通过＆post; type.type＆＃39;转到指令，但它通过其他一切只是找到？

Answer 1

尝试这种方式：

<my-post title='post.title' type='{{post.type}}' snippet='post.snippet'></my-post>

并改变这一点：

scope: {
    title: '=',
    type: '@',
    snippet: '=',
}

Answer 2

在初始化范围之前请求模板。您可以从隔离范围中删除type并将HTML更改为：

<my-post title='post.title' type='{{post.type}}' snippet='post.snippet'></my-post>

正如@karaxuna建议的那样。

AngularJS自定义指令 - 设置属性等于范围对象值

2 个答案: