我试图将一个函数传递给我创建的指令，但它在angularjs中不起作用
我试图将一个函数传递给我创建的指令，但它在angularjs中不起作用
提问于 2017-04-21 18:42:12
当我从下拉列表中选择芯片时，我想在上面的框中添加一个芯片，所以我为它创建了一个过滤器，并向它传递了一个数组，但现在向上面的框添加芯片的函数现在不起作用了，我不知道为什么。
控制器代码：
var app = angular.module("myApp", []);
app.controller("appController", function ($scope) {
$scope.selected = [{
'id': 1,
'state': 'UP'
}, {
'id': 2,
'state': 'Delhi'
}];
$scope.options = [{
'id': 1,
'state': 'UP'
}, {
'id': 2,
'state': 'Delhi'
}, {
'id': 3,
'state': 'Haryana'
}, {
'id': 4,
'state': 'WB'
}]
$scope.add = function (item) {
console.log(item);
let insert = true;
item = JSON.parse(item);
for (let i = 0; i < $scope.selected.length; i++) {
if (angular.equals(item, $scope.selected[i])) {
insert = false;
break;
}
}
if (insert == true) {
$scope.selected.push(item);
$scope.selected = angular.copy($scope.selected);
}
};
$scope.remove = function (item) {
let a = item;
let b = $scope.selected.indexOf(a);
$scope.selected.splice(b, 1);
};
});
app.directive("filter", function () {
return {
restrict: 'E',
scope: {
param: '=',
array: '=',
fun: '&'
},
template: "<div ><select ng-change='fun(items)' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select>"
};
});视图：
<body ng-app="myApp" ng-controller="appController">
<div>
<div class="chip" ng-repeat="chips in selected">
{{ chips.state }}
<span class="closebtn" ng-click="remove(chips)">×</span>
</div>
</div>
<filter array='options' fun='add(param)'></filter>
</body>完整的代码可以在this fiddle中找到。
回答 2
Stack Overflow用户
发布于 2017-10-29 02:00:10
我看过这段代码。除了几个错误之外，我看到的唯一问题是将数据从指令作用域传递回父对象。我的建议是将指令重构为：
app.directive("filter", function() {
return {
restrict: 'E',
scope: {
// selection: '=',
array: '=',
fun: '&'
},
template: `<div>
<select ng-change='fun({ selection: selection })' ng-model='selection'>
<option value='' selected disabled hidden>Choose Here</option>
<option ng-repeat='item in array' value={{item}}> {{item.state}}</option>
</select>
</div>`
};
});正如您所看到的，您实际上不需要在父组件中使用selection，因为它属于'filter‘组件。但是，您可以通过将此数据传递给fun属性(这是您在更改选择时调用的函数)来共享此数据。
控制器的简化版本将是：
$scope.add = function(selection) {
var item = JSON.parse(selection);
for (let i = 0; i < $scope.selected.length; ++i) {
if ($scope.selected[i].id === item.id) {
return;
}
}
$scope.selected.push(item);
};
$scope.remove = function(item) {
let index = $scope.selected.indexOf(item);
$scope.selected.splice(index, 1);
};初始小提琴的工作版本可以在here找到。
Stack Overflow用户
发布于 2017-10-29 00:36:44
更改目录中的以下行
template: "<div ><select ng-change='fun(items)' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select>"至
template: "<div ><select ng-change='fun({param: items})' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select></div>"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43540615
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号