Question

我有以下html：

<div class="jumbotron" ng-controller="protocolCtrl as pctrl">

    <!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->

    <modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>

</div>

在modal-directive.html身体中，我这样做：

<!-- Modal body-->

<div class="modal-body">

    <table-directive list=list headers=headers></table-directive>

</div>

我想查看我传入的list参数。如果它等于某个值，我想将一些html附加到正文

我的指令看起来像这样

.directive('modalDirective', function(){
    return {
        restrict: 'E',
        templateUrl: '/directives/modal-directive.html',
        scope: {
            list: '=',
            headers: '='
        },
        link: function(scope, element, attrs){
            if(scope.list == 'pctrl'){
                element.find('.modal-body').append('This is just a test.')
            }
        }
    };
});

但这不会附加任何东西。如果我放弃if支票，它会附加正常。

我对角度很新，所以如果有人能告诉我如何实现这一目标，我会很感激。

修改

这就是我在table-directive.html

中循环数据的方式

 <tr ng-repeat="l in list.list">

     <!--Access the actual values inside each of the objects in the array-->

     <td ng-repeat="data in l"> {{ data }} </td>

     <td>
         <button type="button" class="btn btn-primary btn-sm"
                 data-toggle="modal">Edit</button>
     </td>

     <td>
        <button type="button" class="btn btn-danger btn-sm" ng-click="list.removeData(l)"
                    data-dismiss="modal">Remove</button>
     </td>

 </tr>

Answer 1

如果你把

<modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>

和

....
  scope: {
        list: '=',
        headers: '='
    },
.....

list: '='检查元素的list attr并将参数作为表达式执行而不是作为字符串我认为您试图获取'pctrl'为字符串不作为范围变量值，以便更改为list="'pctrl'"以作为字符串传递

<modal-directive list="'pctrl'" headers="['ID', 'Protocol']"></modal-directive>

或

将attr作为字符串使用@

.... scope: { list: '@', headers: '=' }, .....

这是一个很好的Explanation。

这是角色官方DOC

<强>更新

如果您只需要检查attr的字符串值，那么您只需使用attrs.list

所以在指令中使用它作为

if(attrs.list === 'pctrl'){ element.find('.modal-body').append('This is just a test.') }

检查链接函数中隔离范围变量的值 - 角度指令

1 个答案: