Question

我无法让我的transcluding指令工作。我想执行以下操作：创建一个指令，该指令输出一个列表，其中每个项目的内容由已转换的内容定义。 E.g：

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

所以我会在op-list的模板中使用ng-repeat，并且必须能够在被转换的内容中访问由ng-repeat创建的范围。

这是我到目前为止所做的：

＆＃13;

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: '='
        }
    };
});

＆＃13;

<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>

＆＃13;

Answer 1

检查是否有效：

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，看看您是否能够访问您的模型。

AngularJS：如何在转换内容中访问指令的范围？

1 个答案: