我有以下問題。 我有一些內容的自定義指令。 這個指令中有一個空間位置應該是動態的(一些自定義功能)。如何在AngularJS 1的控制器中控制動態插入內容的指令?
的指令看起來是這樣的:
var app = angular.module('plunker', []);
app.directive('mydirective', mydirective);
function mydirective() {
return {
restrict : "E",
scope : {
customContent: '@'
},
template : "<div>Some common directive stuff in here! <div id='customContent'></div></div>",
compile: function(element, attr) {
return {
post: function($scope, element, attr) {
console.log("POST");
},
pre: function($scope, element, attr) {
console.log("PRE: " + $scope.customContent);
if($scope.customContent) {
var customContent = (angular.element(document.getElementById('customContent')));
customContent.append($scope.customContent);
}
}
};
}
}
}
正如你可以看到有一個與ID的div標籤= 'customContent'
現在,每當我使用這個指令從一個控制器,我希望不僅能夠在該指令中注入特殊的自定義內容,還能夠提供範圍界定功能。
所需的結果應該是:
控制器
app.controller('MainCtrl', function($scope) {
$scope.func = function() { // THIS DOESN'T WORK
alert(1);
}
});
HTML
<mydirective custom-content="<button ng-controller='MainCtrl' ng-click='func()'>Test</button>"></mydirective>
正如你可以看到我注射過立方米stom-content作爲PRE鏈接函數中的參數。不幸的是,我不能將func()函數掛接到控制器的作用域中,因爲這是我希望能夠控制其中的東西的地方。
非常感謝您的幫助!
這是plunker:https://plnkr.co/edit/I4WAQ20ugeDiackxXqUz?p=preview
傳遞函數爲隔離範圍與另一個屬性 – charlietfl
這會的工作,但我只是展示了一個具有單一功能的簡單示例。想象一下,自定義模板包含多個函數調用。不僅;我可能會在另一個使用此指令的控制器中插入完全不同的內容。 – kirilv