Angular嵌套指令

Question

我正在嘗試使用隔離範圍的子指令執行函數。我似乎無法通過隔離作用域執行其父作用域的函數。它只是不起作用。

UsageA: 
<div data-outer data-controller="control"><div data-inner></div></div> 

Usage B: 
<div data-inner data-controller="controlTwo"></div> 


app.controller('control', ['$scope', function($scope){ 
$scope.onOuterChange = function() { 
    alert("Outer Change"); 
} 
}]); 

app.controller('controlTwo', ['$scope', function($scope){ 
$scope.onInnerChange = function() { 
    alert("Inner Change"); 
} 
}]); 

app.directive('outer', function($compile){ 
// Runs during compile 
return { 
    scope: { 
     "onOuterChange": "&", 
    }, 
    controller: function ($scope, $element) { 
    }, 
    link: function ($scope, iElm, iAttrs, controller) { 
     $scope.onInnerChange = function() { 
      alert("Inner Changed"); 
     } 
    } 
} 
}); 
app.directive('inner', function($compile){ 
// Runs during compile 
return { 
    scope: { 
     "onInnerChange": "&", 
    }, 
    controller: function ($scope, $element) { 
    }, 
    link: function ($scope, iElm, iAttrs, controller) { 
     $scope.onInnerChange(); 
    } 
} 
}); 

Answer 1

在一個隔離的範圍內，您也必須在html中指定方法。

<div data-outer on-outer-change="onOuterChange()"><div data-inner></div></div> 

Answer 2

你失蹤添加on-outer-change到外部指令，將要傳遞給隔離的範圍指令像on-outer-change="onOuterChange()"函數名。然後，對於內部指令，您應該將該方法傳遞給onInnerChange範圍變量inner指令隔離範圍。

標記

<div data-outer on-outer-change="onOuterChange()"> 
    <div data-inner on-inner-change="onOuterChange()"></div> 
</div> 

代碼

app.directive('outer', function($compile) { 
    // Runs during compile 
    return { 
    scope: { 
     "onOuterChange": "&", 
    }, 
    restrict: 'A', 
    controller: function($scope, $element) {}, 
    link: function($scope, iElm, iAttrs, controller) { 
     $scope.onInnerChange = function() { 
     scope.onOuterChange(); 
     } 
    } 
    } 
}); 
app.directive('inner', function($compile) { 
    // Runs during compile 
    return { 
    scope: { 
     "onInnerChange": "&", 
    }, 
    controller: function($scope, $element) {}, 
    link: function($scope, iElm, iAttrs, controller) { 
     $scope.onInnerChange(); 
    } 
    } 
}); 

Demo here