Question

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

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

Answer 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()进行任何调用。

阅读关于＆＃39;指令定义对象的docs＆＃39;有关如何定义隔离范围的更多详细信息。

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

Answer 2

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

因此，子变量总是被父变量取代。

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

谢谢

Answer 3

问题在于转换HTML。我找到了一个关于我所面临问题的完全相同描述的链接。我会尝试一下，但只是张贴给别人参考。

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

指令隔离范围与转换HTML

3 个答案: