嵌套指令中的變量函數名稱

我試圖實現嵌套指令。內部指令是一個按鈕，它在ng-click中調用一個函數。要調用的函數的名稱在模型中定義。嵌套指令中的變量函數名稱

首先，這裏是plunker鏈接。 PLUNKER

問題是該按鈕不知道要調用的函數。有趣的是，如果我使用ng-include和變量中正確命名的變量的外部指令的模板，它就像一個魅力。

某些代碼段爲您提供：

的index.html：

DIRECTIVES 
 
<outer-directive functions="functions" datas="datas"></outer-directive> 
 

 
<p>{{clicked}}</p> 
 

 
NG-Include : 
 
<div ng-include src="'outer-template.html'"></div>

模板外指令

<div ng-repeat="d in datas"> 
 
    Hi, {{d}} 
 
    <inner-directive 
 
    ng-repeat="funct in functions" 
 
    text="funct.text" 
 
    method="this[funct.method](d)"> 
 
    </inner-directive> 
 
</div>

控制器

app.controller('MainCtrl', function($scope) { 
 
    $scope.datas = [0, 1]; 
 
    $scope.functions = [{ 
 
    method: 'functOne', 
 
    text: 'Funct One' 
 
    }, { 
 
    method: 'functTwo', 
 
    text: 'Funct Two' 
 
    }]; 
 

 

 
    $scope.clicked = 'Nothing happend'; 
 

 
    $scope.functOne = function(data) { 
 
    $scope.clicked = data + ' pressed Funct 1'; 
 
    } 
 

 
    $scope.functTwo = function(data) { 
 
    $scope.clicked = data + ' pressed Funct 2'; 
 
    } 
 

 
});

外指令JS

app.directive('outerDirective', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     functions: '=', 
 
     datas: '=' 
 
    }, 
 
    templateUrl: 'outer-template.html' 
 
    } 
 
});

內指令JS

app.directive('innerDirective', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     method: '&', 
 
     text: '=', 
 
     datas: '=' 
 
    }, 
 
    template: '<button ng-click="method(datas)"> {{text}}</button>' 
 
    } 
 
});

來源

2017-07-07 old_account

所以，我決定去與$發射和$（見[這個問題]（https://stackoverflow.com/questions/14502006/working- with-scope-emit-and-scope-on）） –

在回調函數從指令到控制器的參數應爲對象進行傳遞。

這裏是演示plunker

希望它有助於瞭解如何從指令傳遞PARAM通過回調函數到控制器。

現在向前移動到嵌套指令：需要遵循相同的過程，以跨指令傳遞參數，因此最終傳遞給控制器。

讓控制器

app.controller('MainCtrl', function($scope) { 
    $scope.datas = [0, 1]; 

    $scope.functions = [{ 
    "method": "functOne", 
    "text": "Funct One" 
    }, { 
    "method": "functTwo", 
    "text": "Funct Two" 
    }]; 

    $scope.clicked = 'Nothing happend'; 

    $scope.functOne = function(id){ 
    $scope.clicked = id + ' .....pressed Funct 1'; 
    } 

    $scope.functTwo = function(id){ 
    $scope.clicked = id + ' ....pressed Funct 2'; 
    } 

});

外diretive

app.directive('outerDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     outer: '&', 
     datas: '=' 
    }, 
    templateUrl: 'outer-template.html', 
    } 
});

內部指令

app.directive('innerDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     inner: '&', 
     text: '=', 
     data: '=' 
    }, 
    template: '<button ng-click="clickMe()">click here</button>', 
    link: function (scope, element, attrs) { 
     scope.clickMe=function(){ 

      scope.inner({id:'hello... data is ' + scope.data }); 
     } 
    } 

    } 
});

HTML

<body ng-controller="MainCtrl"> 

    <div ng-repeat="func in functions"> 
     <outer-directive outer=$eval(func.method)(term) datas="datas"></outer- 
     directive> 
    </div> 

    <p>{{clicked}}</p> 

    </body>

模板

<div ng-repeat="d in datas"> 
<inner-directive inner="outer({term: id})" data="d"></inner-directive> 
</div>

這裏是working plunker

來源

2017-07-12 15:24:14 himanshu

感謝您的詳細解答。在我的情況下，我需要在外部指令中重複這些函數，而不是讓外部指令爲每個函數重複。所以我不能用外部指令中的'＆'綁定每個函數。 –

嵌套指令中的變量函數名稱

回答

相關問題