javascript - Angularjs 指令 : isolated scope and contained elements

Question

为什么包含的/子元素在使用独立范围时不呈现。怀疑 parent 尚未呈现，我尝试添加 $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>

Answer 1

我想因为你想为指令创建一个新的作用域，你需要传递模型来创建一个双向绑定(bind):

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