在嵌套的AngularJS指令中使用和綁定

我試圖綁定到ng-change上的一個指令創建的元素，通過兩個其他指令將它包裝到控制器上的一個方法，在隔離範圍內使用&綁定，但我可以不知道如何讓爭論一路通過。這是一個plunk，證明了這個問題。在嵌套的AngularJS指令中使用和綁定

總之，我有一個HTML的結構是這樣的：

<body ng-app="ExampleApp"> 
    <div ng-controller="Controller"> 
    <button ng-click="doSomething('Called directly')">Call Function Directly</button> 
    <br /> 
    <outer on-outer-model-changed="doSomething('Called from Outer in HTML')"></outer> 
    </div> 
</body>

控制器：

var app = angular.module('ExampleApp', []); 
app.controller('Controller', ['$scope', 
    function($scope) { 
    $scope.doSomething = function(one, two, three) { 
     console.log(arguments); 
    }; 
    } 
]);

的outer指令：

app.directive('outer', function($compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     outerModelChanged: '&onOuterModelChanged' 
    }, 
    link: function(scope, element, attrs) { 
     var innerElement = angular.element('<inner></inner>'); 
     innerElement.attr('on-inner-model-changed', 'outerModelChanged(\'Called from Outer\')'); 
     element.after(innerElement); 
     $compile(innerElement)(scope); 
     console.log(arguments); 
    } 
    } 
});

而且inner指令的outer指令創建：

app.directive('inner', function() { 
    return { 
    scope: { 
     innerModelChanged: '&onInnerModelChanged' 
    }, 
    restrict: 'E', 
    template: '<button ng-click="innerModelChanged(\'Called from Inner\')">Call from Inner</button>' 
    } 
});

我明白，我得到的輸出["Called from Outer in HTML"]，因爲這是硬編碼到<outer>標籤。我不明白的是如何從inner指令一直向上傳遞參數。

來源

2014-09-23 GarlicFries

我不確定我是否100％獲得了您想要完成的任務，但是您將如何使["Called from Inner"]消息顯示出來。

更改html以便on-outer-model-changed表達式不使用硬編碼的字符串。

<body ng-app="ExampleApp"> 
    <div ng-controller="Controller"> 
     <button ng-click="doSomething('Called directly')">Call Function Directly</button> 
     <br /> 
     <outer on-outer-model-changed="doSomething(outerParam)"></outer> 
    </div> 
    </body>

然後更改外部指令以使用參數調用outerModelChanged。並將outerParam設置爲innerParam。

app.directive('outer', function($compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     outerModelChanged: '&onOuterModelChanged' 
    }, 
    link: function(scope, element, attrs, controller) { 
     var innerElement = angular.element('<inner></inner>'); 
     innerElement.attr('on-inner-model-changed', 'outerModelChanged({outerParam:innerParam})'); 
     element.after(innerElement); 
     $compile(innerElement)(scope); 
     console.log(arguments); 
    } 
    } 
});

最後從與innerParam設置爲你的消息內指令調用innerModelChanged。

app.directive('inner', function() { 
    return { 
    scope: { 
     innerModelChanged: '&onInnerModelChanged' 
    }, 
    restrict: 'E', 
    template: '<button ng-click="innerModelChanged({innerParam:\'Called from Inner\'})">Call from Inner</button>' 
    } 
});

這是上述代碼的plunk。

來源

2014-09-23 18:13:36 Anton

你完全理解，似乎。我最終在這個指令中注入了一個服務，這似乎是一個更爲理智的方法。但是，您提出的更改完全是我嘗試做的。 – GarlicFries 2014-09-23 21:56:45

對此，聽起來確實是一種更好的方法！ – Anton 2014-09-24 01:07:02

在嵌套的AngularJS指令中使用和綁定

回答

相關問題