Angularjs 指令中的选定项不工作

我创建了一个

select指令

，并且使用了两次该指令。我需要查看这两个项目的选定项。我该怎么办

HTML

<div select-list="items"></div>
<div select-list="items2"></div>

选择指令

myApp.directive("selectList", function() {
    return {
        restrict: "EACM",
        template: '<select ng-model="selectedValues" ng-options="item.name for item in data"></select>',
        scope: {
            data: '=selectList'
        }
    }
});

myApp.directive（“selectList”，function（））{
返回{
限制：“EACM”，
模板：“”，
范围：{
数据：'=选择列表'
}
}
});

我需要将两个“选择”的选定项添加到$scope.selectedValues中。

---

我尝试通过

ng change

，但没有成功。

需要正确创建指令：

为您的指令设置一个控制器

如果您使用的是隔离作用域，请确保将selectedValue传递给该作用域。 例：

指令：

myApp.directive("selectList", function(){
return{
    restrict: "EACM",
    template: '<select ng-model="selectedValues" ng-options="item.name for item in data"></select>',
    scope: {
        data: '=selectList',
        ngModel: '='
    }
    //Add link function here, crate watcher on ngModel and update it back on select dropdown selection.
})};

myApp.directive（“selectList”，function（））{
返回{
限制：“EACM”，
模板：“”，
范围：{
数据：'=选择列表'，
ngModel:“=”
}
//在此处添加链接功能，在ngModel上装入watcher，并在select下拉选择中重新更新。
})};

HTML:

---

将链接功能添加到指令中，并在ngModel上设置一个观察者，一旦用户更改了选择，更新父ng模型

您的指令使用隔离作用域，因此无法从控制器访问指令或从指令访问控制器

您必须创建一个新条目

我给你一把有效的小提琴：

//代码在这里
var myApp=angular.module（'app'，[]）；
角度。模块（'app'）
.directive（“selectList”，function（）{
返回{
限制：“EACM”，
要求：'ngModel'，
模板：“”，
范围：{
数据：'=选择列表'
},
链接：功能（范围、元素、属性、模型）{
scope.onSelectedValue=函数（）{
ngModel.$setViewValue（选择范围）；
}
}
}
})
.controller（'mainController'，函数（$scope）{
$scope.items=[
{name:“1”}，
{名称：“2”}
];
$scope.items2=[
{名称：“3”}，
{名称：“4”}
];
$scope.selectedValues=[]；
});

很抱歉，您能对此进行一点扩展吗？对答案做了一些更改，希望这能澄清您的疑问。

myApp.directive("selectList", function(){
return{
    restrict: "EACM",
    template: '<select ng-model="selectedValues" ng-options="item.name for item in data"></select>',
    scope: {
        data: '=selectList',
        ngModel: '='
    }
    //Add link function here, crate watcher on ngModel and update it back on select dropdown selection.
})};

<div select-list="items" ng-model="selectedValue1" ></div>
<div select-list="items2" ng-model="selectedValue2"></div>

// Code goes here
var myApp = angular.module('app', []);
angular.module('app')
.directive("selectList", function(){
  return {
      restrict: "EACM",
      require: 'ngModel',
      template: '<select ng-model="selected" ng-change="onSelectedValue()" ng-options="item.name for item in data"></select>',
      scope: {
          data: '=selectList'
      },
      link: function (scope, element, attr, ngModel) {
        scope.onSelectedValue = function () {
            ngModel.$setViewValue(scope.selected);
        }
      }
  }
})
.controller('mainController', function($scope) {
  $scope.items = [
      {name: "1"},
      {name: "2"}
  ];
  $scope.items2 = [
      {name:"3"},
      {name:"4"}
  ];
  $scope.selectedValues = [];
});