Question

我有html标记，我需要在很多地方使用，所以宁可一次又一次地复制粘贴，但标题不同

我想创建一个看起来像这样的指令

myModule.directive('row', function ($compile) {
    return {
        restrict: 'E',
        template: '<div class="row">'+
        '<div class="col-md-10 margin-top-10px font-18px">{{heading}}</div>'+
       ' <div class="col-md-2">'+
            '<div class="margin-top-10px"><span ng-click="close()" class="close helvetica color-black">&times;</span></div>'+
        '</div>'+
    '</div>',
        replace: true,
        link: function (scope, element, attrs, ctrl) {
            var test = attrs.heading;
        }

    };

}）;

以及我如何尝试使用它

 <row heading="its my heading "></row>

我无法使它工作。我不想创建孤立的范围或子范围我只是想从属性传递值，当模板被替换时我想要它的插值。

有人可以帮助我如何识别这个

Answer 1

尝试：

link: function (scope, element, attrs, ctrl) {
    scope.heading = attrs.heading;
}

设置

也可能是个好主意

scope: true

在模板中使用之前，您必须将attr对象中的值实际附加到范围。

Answer 2

添加

scope: {
  heading: '='
}

指向您的指令定义以使用该属性创建双向数据绑定。如果你传入范围变量，你会这样做。

或使用@

scope: {
  heading: '@'
}

如果你只是传入一个字符串。

极简主义的plunkr演示：http://plnkr.co/edit/U5OzlMiXaIsHEdb5gmRT

指令angularjs中的属性值

2 个答案: