javascript - Angular js指令属性和 Controller 范围

Question

我想要一个指令，它创建一个 div 作为标题，并在其下创建一个 ul 列表。

我希望通过 Controller 从属性和列表设置标题。

这是一个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

修复了 Controller 中的一些问题。

1. 将 Controller 移至 div

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

2. 修复了接收列表作为参数的指令

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

虽然我有一个疑问。

Controller myList 尝试查看或指令？如果它与指令绑定(bind)，则

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