我试图从指令中调用一个控制器函数，但它一直说"我的函数没有定义"。我不熟悉angularJs的指令。我试着在指令中使用link:function，但我真的搞不清楚。请帮忙。。谢谢：-(
html:
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button class="btn" ng-click="changeDataObj()">Change Data Object</button>
<div my-Tree list="list" >
</div>
</div>
</body>
js：
angular.module('myApp', [])
.controller('myCtrl', myCtrl)
.directive('myTree', ['$compile', myTree]);
function myCtrl($timeout, $scope) {
$scope.reset = true;
$scope.list = [
{
name: 'Laptop',
children: [
{
name: 'Apple',
children: [
{ name: 'Macbook Air' },
{ name: 'Macbook Pro' }
]
},
{
name: 'Microsoft',
children: [
{ name: 'Surface Pro' }
]
}
]
},
{
name: 'Desktop',
children: [
{ name: 'Dell' }
]
}
];
$scope.selectANode = function (name) {
alert(name);
}
}
function myTree($compile) {
return {
restrict: 'EA',
scope: {
list: '='
},
compile: function (tElem) {
return {
post: function (scope, iElem, iAttrs) {
var htmlString = [''];
addChildren(htmlString, scope.list, true);
function addChildren(htmlString, array, first) {
if (!angular.isArray(array)) return;
if (first) { // root level parent must always be display:block
htmlString[0] += '<ul>';
} else {
htmlString[0] += '<ul style="display:none;">';
}
for (var i = 0; i < array.length; i++) {
htmlString[0] += '<li><span ng-click="selectANode('' + array[i].name + '')">' + array[i].name + '</span><i class="navFinder__toggleBtn fa fa-folder-o"></i>';
addChildren(htmlString, array[i].children);
htmlString[0] += '</li>';
}
htmlString[0] += '</ul>';
}
var compiledContents = $compile(htmlString[0]);
compiledContents(scope, function (clone) {
iElem.append(clone);
})
iElem.find('i').on('click', function (event) {
event.target.className = (event.target.className == 'fa fa-folder-open-o navFinder__toggleBtn') ? 'fa fa-folder-o navFinder__toggleBtn' : 'fa fa-folder-open-o navFinder__toggleBtn'; // change icon
event.target.nextSibling.style.display = (event.target.nextSibling.style.display == 'none') ? 'block' : 'none'; // expand and collapse
});
}
};
}
};
}
ng-click上的方法应保持在compile->post中
scope.selectANode = function (name) {
alert(name);
}
Plunker 1
但是如果你想调用控制器的方法，你需要添加额外的代码来绑定它：
scope: {
list: '=',
selectNode: '&'
},
// ...
scope.selectANode = function (name) {
scope.selectNode({data: name});
}
和您的HTML:
<div my-Tree list="list" select-node="selectANode(data)">
Plunker 2
享受：(