Question

我有这个指令：

App.directive('tablealerts', function(){
return {
    restrict: 'E',
    templateUrl: 'html/table_alerts.html',
    controller: 'tableController',
    replace: true,
    scope: {
        title: "@",
        memberId: "=",
        columns: "=",
        accessor: "=",
        export: "="
    },
    link : function(scope, element, attrs, controllers) {
        console.log(scope);
        console.log(element);
        console.log(attrs);
        console.log(controllers);
    }
};
});

这是控制器：

App.controller('tableController',['$scope','$rootScope',function($scope,$rootScope) {
    console.log($scope.title);
}]);

为了简洁起见，代码被剥离了，但如果我现在在HTML上多次使用该指令，那么：

    <tablealerts title="Alerts"
        columns="[{'label':'Date Time','value':'DateCreated'},
                  {'label':'Event','value':'EventName'},
                  {'label':'Device','value':'DeviceType'}]"
        accessor="tableAccessor" member-id="1">
     </tablealerts>
    <tablealerts title="Events" 
        columns="[{'label':'Date Time','value':'DateCreated'},
                  {'label':'Device','value':'DeviceType'}]" 
        accessor="tableAccessor" member-id="2">
    </tablealerts>

在控制台中，我只看到其中一个<tablealerts>而不是两者的标题。

这是我的控制台输出：

Events
Scope {$id: 45, $$childTail: null, $$childHead: null,
      $$prevSibling: null, $$nextSibling: null…}
[div.panel.panel-sky.ng-isolate-scope]
Attributes {$attr: Object, $$element: JQLite(1), title: "Events", 
        columns: "[{'label':'Date Time','value':'DateCreated'},
                   {'lab…ntName'},
                   {'label':'Device','value':'DeviceType'}]",
        accessor: "tableAccidentAccessor"…}
Object {}

我做错了什么？

Answer 1

您在指令中获得了正确的标题。我没有看到你的代码有什么问题。这只是一个在哪里看的问题。请看一下片段。

App = angular.module('myApp', []);

App.directive('tablealerts', function(){
return {
    restrict: 'E',
    template: '<div></div>',
    controller: 'tableController',
    replace: true,
    scope: {
        title: "@",
        memberId: "=",
        columns: "=",
        accessor: "=",
        export: "="
    },
    link : function(scope, element, attrs, controllers) {
        console.log(' DIR ');
        console.log(scope.title);
        //console.log(element);
        //console.log(attrs);
        //console.log(controllers);
        //console.log( attrs.title );
    }
};
});

App.controller('tableController',['$scope','$rootScope',function($scope,$rootScope) {
    //console.log($scope.title);
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="tableController">
    <tablealerts title="Alerts" columns="[{'label':'Date Time','value':'DateCreated'},{'label':'Event','value':'EventName'},{'label':'Device','value':'DeviceType'}]" accessor="tableAccessor" member-id="1"></tablealerts>
    <tablealerts title="Events" columns="[{'label':'Date Time','value':'DateCreated'},{'label':'Device','value':'DeviceType'}]" accessor="tableAccessor" member-id="2"></tablealerts>
</div>
</body>

Answer 2

完全随机奇怪的东西。你可以通过评论和其他答案来判断，我的原始代码似乎很好。

拔了我的头发这么多个小时之后，我尝试将指令模板从templateUrl更改为直模板。

这解决了一切。

完全愚蠢。如果有人对此有解释，我很乐意听到。

AngularJS - 为什么我的指令/控制器只加载一次？

2 个答案: