Question

我正在玩Angular，并试图了解有关范围的更多信息。

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

app.controller('MainCtrl', function($scope){
    $scope.color = 'green';
    $scope.sayHello = function(){
        console.log("HELLO FROM PARENT SCOPE");
    }
});

app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
            scope: {
                color: '@colorAttr',
                sayHello: '&'
            },
      template: '<p style="background-color:{{color}}">Hello World',
            link: function(scope, elem, attrs) {
                scope.sayHello();
            }
  };
});

我试图调用父方法sayHello（）但是当我使用隔离范围时它不允许我。我已经阅读了一些关于使用＆amp;在隔离的范围内，但不确定我是否正确使用它。

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" ng-app="myapp">
<head>
</head>
<body ng-controller="MainCtrl">
    <div ng-model="color"/>
    <hello-world color-attr="{{color}}">Replaced</hello-world>
</body>

</html>

Answer 1

我认为您需要将此方法传递给指令

<hello-world color-attr="{{color}}" say-hello="sayHello()">Replaced</hello-world>

<强>解释

创建隔离范围时，父范围对指令是隐藏的，因此在链接函数中隐藏了sayHello（）。尽管如此，它仍然可以通过范围访问。$ parent

在指令初始化中传递的作用域对象建立了内部作用域属性/方法与指令属性之间的映射，而这些属性又可以链接到外部作用域属性/方法。

在上面的代码中，链接函数中的sayHello被映射到父作用域中与在属性say-hello中映射的名称相同的函数。

希望这次我更清楚:)

Answer 2

您也可以通过传递调用父控制器方法功能参考。以下代码有助于了解您的方式可以使用。

<hello-world color-attr="{{color}}" say-hello="sayHello">Replaced</hello-world>

app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
            scope: {
                color: '@colorAttr',
                sayHello: '='
            },
      template: '<p style="background-color:{{color}}">Hello World',
            link: function(scope, elem, attrs) {
                scope.sayHello();
            }
  };
});

Angular隔离范围调用父函数

2 个答案: