Question

看看以下代码：

HTML：

  <body ng-app="myApp">
    <div ng-controller="MainController">
      <input type="button" ng-click="talk()" value="outside directive" />
      <div my-element>
        <input type="button" ng-click="talk()" value="inside directive" />
      </div>
    </div>
  </body>

JS：

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

app.controller('MainController', function($scope){
  $scope.talk = function() {
    alert('HELLO1');
  }
});

app.directive('myElement', function(){
  return {
    restrict: 'EA',
    scope: {},
    controller: function($scope) {
      $scope.talk = function() {
        alert('HELLO2');
      }
    }
  };
});

如你所见，有一个控制器，它嵌套一个指令。

有2个按钮，一个在控制器级别（指令之外），另一个在指令my-element内。

主控制器定义范围方法talk，嵌套指令控制器还定义了一个方法 - talk - 但请记住，该指令具有隔离范围（我希望{{1} }方法不会被继承到指令的范围内。）

两个按钮都会产生'HELLO 1'的警告，而我希望第二个按钮（内部指令）按照指令控制器中的定义警告'HELLO 2'，但它没有 - 为什么？

我在这里失踪了什么？当第二个按钮提醒'HELLO 2'但方法名称相同（“谈话”）时，我怎么能得到一个结果？

感谢所有

Answer 1

如果您希望内部内容使用指令范围，则需要使用手动转换：

app.directive('myElement', function(){
  return {
    restrict: 'EA',
    scope: {},
    transclude: true,
    link: function(scope, element, attr, ctrl, transclude) {
         transclude(scope, function(clone, scope) {
             element.append(clone);
         });
    },
    controller: function($scope) {
      $scope.talk = function() {
        alert('HELLO2');
      }
    }
  };
});

默认情况下，已转换的内容使用指令范围的兄弟。我实际上不知道角度如何处理不使用transclude的指令的DOM内容（这使得这个问题成为一个有趣的问题），但我会假设你看到这些元素使用指令＆＃39;默认为父范围。

Answer 2

这对你有用

<body ng-app="myApp">
    <div ng-controller="MainController">
        <input type="button" ng-click="talk()" value="outside directive" />
        <div my-element></div>
    </div>
</body>

app.directive('myElement', function(){
    return {
        restrict: 'A',
        template: '<input type="button" ng-click="talk()" value="inside directive">',
        replace: true,
        scope: {},
        controller: function($scope) {
            $scope.talk = function() {
                alert('HELLO2');
            }
        }
    };
});

Angular - 理解指令隔离范围方法

2 个答案: