Question

我希望有一个指令，可以在其下创建div作为标题和ul列表。

我希望通过属性设置标题，并通过控制器设置列表。

以下是我的代码的fiddle

HTML：

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

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());
            });
        }
    }
}])

我该如何解决这个问题？

Answer 1

修改了控制器中的一些东西。

将控制器移至div

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

fixed指令接收列表作为参数

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);}
    }
}
}])

虽然我有一个疑问。

控制器myList来试图查看或指令？如果它与指令相关

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'
    }
}])

Answer 2

问题（如错误消息所示）是指定多个请求隔离范围的指令。

实际上，如果要为指令指定控制器，则使用指令定义对象的controller属性：

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

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

<强> Updated fiddle

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

2 个答案: