Javascript angular js指令属性和控制器范围

我想要一个指令，它创建一个

div

作为标题，并在其下创建一个

ul

列表

我希望通过属性和控制器在列表中设置标题

这是我的一段代码

HTML:

JavaScript:

angular.module('myModule', []).
controller('ListController', ['$scope', function ($scope) {
    $scope.items = [{
        caption: 'Item 1'
    }, {
        caption: 'Item 2'
    }, {
        caption: 'Item 3'
    }];
}]).directive('myList', [function () {
    return {
        restrict: 'E',
        template: '<div>' +
            '<div style="font-weight:bold;">{{caption}}</div>' +
            '<ul>' +
            '<li ng-repeat="item in items">{{item.caption}}</li>' +
            '</ul>' +
            '</div>',
        scope: {
            caption: '@caption'
        },
        link: function (scope, element) {
            element.find('li').on('click', function (evt) {
                alert($(this).html());
            });
        }
    }
}])

angular.module（'myModule'，[]）。
控制器（'ListController'，['$scope'，函数（$scope）{
$scope.items=[{
标题：“项目1”
}, {
标题：“项目2”
}, {
描述：“项目3”
}];
}]).directive（'myList'，[function（）{
返回{
限制：'E'，
模板：“”+
“{{caption}}”+
“
”+
“
{{item.caption}
”+
“
”+
'',
范围：{
标题：“@caption”
},
链接：功能（范围、元素）{
元素。查找（'li'）。打开（'click'，函数（evt）{
警报（$（this.html（））；
});
}
}
}])

如何解决此问题？

问题（如错误消息所示）在于您指定了多个指令，这些指令请求一个独立的作用域

实际上，如果要为指令指定控制器，请使用指令定义对象的

controller

属性：

<my-list caption="My List"></my-list>

.directive('myList', [function () {
    return {
        ...
        controller: 'ListController', 
        ...

.directive（'myList'，[function（）{
返回{
...
控制器：“ListController”，
...

---

---

修复了控制器中的一些问题

已将控制器移动到div

<div ng-app="myModule"  ng-controller="ListController">
    <my-list caption="My List" list="items"></my-list>
</div>

<div ng-app="myModule"  ng-controller="ListController">
    <my-list caption="My List" list="items"></my-list>
</div>

directive('myList', [function () {
return {
    restrict: 'E',
    template: '<div>' +
        '<div style="font-weight:bold;">{{caption}}</div>' +
        '<ul>' +
        '<li ng-repeat="item in items" ng-click="onClick(item)">{{item.caption}}</li>' +
        '</ul>' +
        '</div>',
    scope: {
        caption: '@caption', items: '=list'
    },
    link: function (scope, element) {
        scope.onClick= function(item){console.log(item);}
    }
}
}])

angular.module('myModule', []).
controller('ListController', ['$scope', function ($scope) {
    $scope.items = [{
        caption: 'Item 1'
    }, {
        caption: 'Item 2'
    }, {
        caption: 'Item 3'
    }];
}]).directive('myList', [function () {
    return {
        restrict: 'E',
        template: '<div>' +
            '<div style="font-weight:bold;">{{caption}}</div>' +
            '<ul>' +
            '<li ng-repeat="item in items" ng-click="onClick(item)">{{item.caption}}</li>' +
            '</ul>' +
            '</div>',
        scope: {
            caption: '@caption'
        },
        link: function (scope, element) {
            scope.onClick= function(item){console.log(item);}
        },
        controller: 'ListController'
    }
}])