1

分離スコープを使用すると、含まれている/子要素がレンダリングされないのはなぜですか。親がまだレンダリングされていないのではないかと疑って、$timeout を追加しようとしましたが、まだ運がありません。コメントアウトして分離スコープを削除すると

 scope: {},

できます。スコープを分離し、含まれている要素をレンダリングする必要がある場合、それを機能させるにはどうすればよいですか。

コード: http://plnkr.co/edit/ZEwj9z?p=preview

'use strict';

var app = angular.module('Directives', []);

app.controller('MainCtrl', function ($scope) {
   $scope.data = [{id:1}, {id:2}, {id:3}];
});


app.directive('test', function ($timeout) {
  return {
            restrict: 'A',
            scope: {}, //if it is commented out, li would render
            link: function (scope, elm, attrs) {
                console.log('Inside link..');
            }
    };
});

テンプレート

 <div ng-controller="MainCtrl">
      <ul test>
        <li ng-repeat="d in data"> {{d}} </li>
      </ul>
    </div>
4

2 に答える 2

2

ディレクティブの新しいスコープを作成したいので、モデルを渡して双方向バインディングを作成する必要があると思います。

<ul test="data">
    <li ng-repeat="d in data"> {{d}} </li>
</ul>

指令： 

app.directive('test', function ($timeout) {
    return {
        restrict: 'A',
        scope: {data:"=test"},
        replace:false,
        link: function (scope, elm, attrs) {
            console.log('Inside link..'+scope.data);
        }
    };
});
于 2013-09-18T12:51:30.560 に答える