带有嵌入 HTML 的指令隔离范围答案

【问题标题】：Directive isolated scope with transcluded HTML带有嵌入 HTML 的指令隔离范围
【发布时间】：2015-07-16 13:23:41
【问题描述】：

我遇到了一些关于隔离范围的问题。我有一个需要在很多地方使用的指令，它的控制器有一些指令的辅助函数。该指令确实创建了隔离范围，但模板引用了父范围。下面是一个演示该问题的插件

http://plnkr.co/edit/LQnlSjMHeatMkmkYZyfk

$scope.text = "test";

是为了演示该属性在隔离作用域内不发生变化，而是指向父作用域。由于这个问题，我无法为每个隔离范围调用辅助函数。我希望我能够正确地描述我的问题。

下面是代码

HTML：

<body ng-controller="MainCtrl">
        <div transfer-box style="">
            {{text}}
        <div ng-if="refresh" ></div>
            {{refresh}}
        </div>
    <div transfer-box style="">
            {{text}}
        <div ng-if="refresh" ></div>
            {{refresh}}
        </div>
  </body>

Javascript：

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

app.controller('MainCtrl', function($scope) {
  $scope.text = 'World';
  console.log("parent scope id "+ $scope.$id); 
});
app.directive('transferBox', function() {
      return {
        restrict: 'EA',
        xreplace: true,
        transclude: true,
        scope:true,
        template: '<div class="container-fluid" style="height:100%" ng-transclude></div>',
        controller:'transferBoxCtrl'
      };
    })
app.controller('transferBoxCtrl',['$scope',function($scope){
  console.log($scope.$id);
        $scope.refresh = true;
        $scope.text = "test";
    }])

【问题讨论】：

你能把所有相关代码都放在帖子里吗？
您正在对指令使用外部控制器！坏，坏主意！你应该为指令创建一个指令控制器！
能否请您编辑一下 plunk 以便我能正确理解。

标签： javascript angularjs angularjs-scope

【解决方案1】：

您尚未创建隔离范围。您需要将对象传递给 scope 属性，例如：

app.directive('transferBox', function() {

  return {
    restrict: 'EA',
      xreplace: true,
    transclude: true,

    // create an isolate scope
      scope:{
        text: '=?'
      },

    template: '<h1>{{text}}</div>',

      // define directive controller within the directive definition
      controller: function($scope){
         $scope.text = $scope.text || 'default'
      }

  };



});

index.html

<body ng-controller="MainCtrl">

      <div transfer-box text="text" ></div>
      <div transfer-box ></div>

  </body>

还要注意，控制器是在指令定义中定义的，因此不需要对app.controller() 进行任何调用。

阅读有关“指令定义对象”的docs，了解有关如何定义隔离范围的更多详细信息。

DEMO - 显示修改后的代码版本，展示如何实现指令和父控制器之间共享的隔离范围。

【讨论】：

嗨，马特，我面临的问题是 transclude，因为指令中的内容可能不同。我改变了你 plunk 来演示问题plnkr.co/edit/W8yilxCU6GBgc1anRUwc

【解决方案2】：

这是不可能的，因为角度负载首先是子级，这里 transfer-box 指令是子级，然后 MainCtrl 控制器是父级。

所以子变量总是被父变量替换。

Matt Herbstritt 提供的解决方案很棒。

谢谢

【讨论】：

【解决方案3】：

问题在于嵌入的 HTML。我找到了一个与我面临的问题完全相同的描述的链接。我会试一试，但只是将其发布以供其他人参考。

http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

【讨论】：