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

AngularJS Custom Directive - Setting attribute equal to scope object value

本文关键字：于范围 范围 对象 指令 自定义 设置 属性 AngularJS      更新时间：2023-09-26

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

.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>

不行...但是当我将类型属性更改为 

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

它可以工作并将所有范围数据传递到 POST.html 模板中。有什么区别？为什么它不将"post.type"传递给指令，而是传递其他所有内容只是找到？

试试这个方式：

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

并更改此内容：

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

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

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

正如@karaxuna所建议的那样。

相关文章：