javascript - Angularjs 指令：隔离范围和包含的元素

Question

为什么在使用隔离范围时不呈现包含/子元素。怀疑父级尚未渲染，我尝试添加一个 $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

我认为因为你想为指令创建一个新的范围，你需要传递模型来创建一个双向绑定：

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

Answer 2

隔离作用域在原型上不是从父作用域继承的；data您的测试指令中没有属性。

要访问它，您应该直接从父级引用它：

<li ng-repeat="d in $parent.data"> {{d}} </li>

或设置双向数据绑定：

<ul test="data">

scope: {data: '=test'}