Fatal编程技术网
  • javascript/
  • Javascript 我试图将函数传递给我创建的指令，但它在angularjs中不起作用

Javascript 我试图将函数传递给我创建的指令，但它在angularjs中不起作用

javascript angularjs arrays

Javascript 我试图将函数传递给我创建的指令，但它在angularjs中不起作用,javascript,angularjs,arrays,Javascript,Angularjs,Arrays,当我从下拉列表中选择芯片时，我想在上面的框中添加一个芯片，所以我已经为它创建了一个过滤器，并且我已经向它传递了一个数组。现在，将芯片添加到上面框中的功能现在不起作用了，我不知道为什么 控制器代码： var app = angular.module("myApp", []); app.controller("appController", function ($scope) { $scope.selected = [{ 'id': 1, 'state': '

当我从下拉列表中选择芯片时，我想在上面的框中添加一个芯片，所以我已经为它创建了一个过滤器，并且我已经向它传递了一个数组。现在，将芯片添加到上面框中的功能现在不起作用了，我不知道为什么

控制器代码：

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)">&times;</span>
        </div>
    </div>
    <filter array='options' fun='add(param)'></filter>
</body>
完整的代码可以在目录中找到。

在下面的行中进行更改

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(items)' ng-model='items'><option value='' selected disabled hidden>Choose Here</option> <option ng-repeat='item in array' value={{item}}> {{item.state}}</option> </select>"
到

我已经看过这个代码了。除了一些错误之外，我看到的唯一问题是将数据从指令作用域传递回父级。我的建议是将指令重构为：

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>`
  };
});
可以找到初始小提琴的工作版本。

我已经看过这段代码。除了一些错误之外，我看到的唯一问题是将数据从指令作用域传递回父级。我的建议是将指令重构为：

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>`
  };
});
可以找到初始小提琴的工作版本。

@Roby Rodriguez您的模板中有一个小错误，将其修改为Choose Here{{{item.state}这是原始问题的一部分-我只是做了一个复制粘贴和格式化，以便有一天可以解决：@Roby Rodriguez您的模板中有一个小错误，将其修改为Choose Here{{item.state}这是原始问题的一部分-我只是做了一个复制粘贴和格式化，以便有一天可以解决它：