DOM中的两个指令实例-Java 学习之路

我在DOM中有两个指令实例 .

<my-directive></my-directive>

......后来在dom

<my-directive</my-directive>

该指令使用一个控制器（$ scope），一切都按预期工作，除非我把它放在指令中...

...
scope: {},
controller: function( $scope ){
....

当我添加隔离范围时，第一个指令不显示任何内容，第二个指令显示就好了 .

该指令调用服务来获取数据 .

这是一个工作jsFiddle与我的angularjs版本和问题 .

broken jsFiddle

UPDATE #1 这是我想要工作的一个例子 . 出于某种原因，它适用于plunker，但不适用于我的本地 .

plunker

UPDATE #2

使用上面的plunker，我能够与同事一起处理这个问题 .

问题在于我在我的本地文件中所做的事情，但不是在plunker（它一直有效）中 .

这是缩短的代码

app.directive("rsGeneralLinksMenu", [ 'menuService', function( menuService ){

  var shared = {};

  return {
    restrict: 'E',
    templateUrl: 'directives/consumer-portal/menu.html',
    scope: {},

    controller: function( $scope ){

      menuService.getTemplates( menuTemplateCallback );
      shared.$scope = $scope;

    } // end link
  }; // end return

  function menuTemplateCallback( template ){
    shared.$scope.links = template;
  }
}]);

我在这里学到了什么......

Angularjs遍历指令并返回返回对象（以及返回对象中的任何内容） .

如您所见，我正在设置var shared = {};在返回之外，以便我以后可以附加$ scope控制器并在return语句之外使用$ scope而不必在参数中传递它 . 然而，这有一个我当时没有意识到的副作用 .

当指令加载时，它会创建'shared'对象并将$ scope附加到它，这是我从调用shared . $ scope.links中绘制返回的服务器数据的地方，从而更新HTML模板 .

如果你还记得，我在DOM中有两个这个指令的实例 . 创建第二个实例时，它覆盖了第一个指令的共享 . $ scope对象，其指令号为$ scope，因此删除了第一个指令的$ scope的任何引用 .

通过删除'shared'对象并将回调嵌套在指令控制器内部，回调引用了每个实例的正确$ scope对象，现在一切正常 .

它现在像这样......

app.directive("rsGeneralLinksMenu", [ 'menuService', function( menuService ){

  return {
    restrict: 'E',
    templateUrl: 'directives/consumer-portal/menu.html',
    scope: {},

    controller: function( $scope ){

      menuService.getTemplates( menuTemplateCallback );

      function menuTemplateCallback( template ){
        $scope.links = template;
      }
    } // end link
  }; // end return
}]);

上面的plunker链接现在有一个完整的工作示例 . 我的两个指令只需要一个服务器数据返回来使用相同的数据，但是我在plunker中稍微分解了一下，以显示指令的两个实例如何包含它们自己的范围对象 .

Wow, that was fun learning that!!!!

DOM中的两个指令实例

相关问题