AngularJS:如何访问指令'的范围

AngularJS : How to access the directive's scope in transcluded content?

本文关键字：指令 范围 访问 何访问 AngularJS      更新时间：2023-09-26

我的transcluding指令无法工作。我想做以下事情：创建一个指令，输出一个列表，其中每个项的内容由transcluded内容定义。例如：

<op-list items="myItems">
  <span class="item">{{item.title}}</span>
</op-list>

因此，我将在操作列表的模板中使用ng-reeat，并且必须能够访问由ng-rerep在transcluded内容中创建的范围。

这就是我迄今为止所做的：

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.myModel = {
        name: 'Superhero',
        items: [{
            title: 'item 1'
        }, {
            title: 'item 2'
        }]
    };
}]);
myApp.directive('opList', function () {
    return {
        template: '<div>' +
            '<div>items ({{items.length}}):</div>' +
            '<div ng-transclude ng-repeat="item in items"></div>' +
            '</div>',
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            items: '='
        }
    };
});
<html ng-app="myApp">
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <div>Hello, {{myModel.name}}!</div>
    <op-list items="myModel.items"> 
        <span>title: {{item.title}}|{{$scope}}|{{scope}}|{{items}}</span>
    </op-list>
</div>
  
</html>

检查这是否有效：

myApp.directive('opList', ['$scope', function ($scope) {
    return {
        template: '<div>' +
            '<div>items ({{model.items.length}}):</div>' +
            '<ng-transclude ng-repeat="item in model.items"></ng-transclude>' +
            '</div>',
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            items: '='
        }
    };
}]);

若并没有，那个么试着在控制台中检查$scope，看看你们是否能够访问你们的模型。

相关文章：