Angular,指令隔离范围

时间:2016-12-30 14:15:40

标签: angularjs angularjs-directive

仍在尝试学习Angular

我在这里有一个傻瓜https://plnkr.co/edit/3FLmBtHP5TuOwWZHBMLK?p=preview

我只是想创建一个带隔离范围的指令示例。

我正在使用$ http和一个承诺来获取汽车细节的虚拟json。

我正试图在指令中显示汽车细节。

该指令有一个隔离范围,我试图传递'car'。

我正在使用ng-repeat来遍历json,但它只是对指令进行一次显示。

我收到一个控制台错误,说“汽车”没有定义。

(function() {

  angular
    .module('cxoJsApp')
    .directive('simple', function() {

      return {
        restrict: 'E',
        controller: 'simpleController',
        controllerAs: 'simpleCtrl',
        scope: {
          car: '='
        },
        bindtoController: true,
        templateUrl: 'simple.html'

      };

    });

})();

2 个答案:

答案 0 :(得分:1)

您没有在ng-repeat中引用正确的对象。 homeCtrl.myJson应该是homeCtrl.myJson.data

<div ng-repeat="c in homeCtrl.myJson.data">

答案 1 :(得分:1)

我同意jbrown,你没有引用正确的对象。我使用相同的示例创建了示例plunker以演示相同的内容。

<div class="col-sm-12" ng-controller="simpleController as vm">
    <div ng-repeat="c in vm.myJson.data track by $index">
      <simple car="c"></simple>
    </div>
    {{vm.myJson}}
</div>