角度隔離作用域調用父函數

我正在玩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（），但是當我用一個孤立的範圍，它不會讓我。我已經閱讀了一些關於在隔離範圍內使用&的內容，但不確定我是否正確使用它。

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>

來源

2014-04-28 Chapsterj

向我們展示你的HTML太 – Mosho

我認爲你需要的方法傳遞給指令這樣

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

解釋

當你創建一個孤立的範圍父範圍從指示隱藏，因此在鏈接函數中隱藏sayHello（）。 $ parent

在指令初始化中傳遞的作用域對象在內部作用域屬性/方法和指令的屬性之間建立映射，而這些映射又可以鏈接到外部作用域屬性/方法。

在上述代碼中，鏈接函數中的sayHello被映射到父級作用域中與在屬性say-hello中映射的名稱相同的函數。

希望我更加清楚這個時候:)

來源

2014-04-28 21:00:54 spacemigas

我不明白的是，如果我是給範圍爲母體然後我就可以直接調用它的鏈接方法內。就像我上面所做的那樣。你能解釋一下這個區別嗎？ – Chapsterj

你可以傳遞一個參數給父函數從隔離範圍內 –

您還可以通過傳遞函數引用調用父控制器方法從隔離。以下代碼有助於瞭解您如何使用。

<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(); 
      } 
    }; 
});

來源

2016-03-04 20:05:33 vasudev

角度隔離作用域調用父函數

回答

相關問題