如何在custom指令中访问控制器数据集

时间:2016-06-21 07:30:30

标签: angularjs

我正在使用自定义指令的angular js范围,并尝试在自定义指令中使用具有不同属性名称但未成功的控制器数据集。请查看我的代码并建议我访问数据的正确方法是什么,并在自定义指令的ng-repeat中进行设置。

我是否需要在自定义指令或指令模板内设置 ng-repeat ?我的意思是

像这样

<movie-list ng-repeat="entry in movieData" > </movie-list>

或指令模板

<movie-list movieArray = "movieData" ></movie-list>

然后

<div>
 <ul >
     <li ng-repeat="entry in movieArray"> {{...}} </li>
 </ul>
</div>

这是我的数据

app.js

angular
    .module('app')
    .controller('homeController', function($scope) {
        $scope.movieData = [{
            name : 'PK',
            star : 'Aamir Khan',
            releaseYear : '2015'
        },
        {
            name : 'PiKu',
            star : 'Irrfan Khan',
            releaseYear : '2015'
        }
        ];
});

// custom directive

angular
.module('app')
.directive('movieList', function(){
    // Runs during compile
    return {
        scope: { movieArray : '=movieArray' }, 
        controller: function($scope, $element, $attrs, $transclude) {
        },
        require: '?ngModel', 
        restrict: 'E',
        templateUrl: 'movie.html',
        replace: true,
        link: function($scope, element, attr, controller) {
            // console.log($scope.$parent);
        }
    };
});

的index.html

<div ng-controller="homeController" >
<div class="col-lg-6">
    <movie-list movieArray="movieData"></movie-list>
</div>

movie.html

<div>
<ul class="list-group" >
    <li ng-repeat="entry in movieArray" class="list-group-item" >
        <h3 class="list-group-item-heading">{{ entry.name }}</h3>
        <p class="list-group-item-text">
            {{ entry.star }} - Release in {{ entry.releaseYear }}
        </p>
    </li>
</ul>
</div>

scope: { movieArray : '=movieArray' }&gt;&gt;不工作

scope: { movieArray : '=movieData' }&gt;&gt;不工作

甚至我改变了属性

<movie-list movieArray="movieArray"></movie-list>

但没有工作

2 个答案:

答案 0 :(得分:2)

更新属性名称:

<movie-list movieArray="movieData"></movie-list&GT;

要:

<movie-list movie-array="movieData"></movie-list>

注意:指令或属性名称应为小写。

答案 1 :(得分:0)

如果你想在你的指令中跳过范围(删除范围:{movieArray:'= movieArray'},你的指令),你可以通过Index.html中的以下代码来做到这一点:

<div ng-controller="homeController" >
<div class="col-lg-6">
    < div movie-list></div>
</div>

在你的控制器中,你需要通过movieArray替换movieData:

 .controller('homeController', function($scope) {
        $scope.movieArray= [{
            name : 'PK',
            star : 'Aamir Khan',
            releaseYear : '2015'
        },
        {
            name : 'PiKu',
            star : 'Irrfan Khan',
            releaseYear : '2015'
        }
        ];