指令中的选定项目不起作用

时间:2016-03-22 13:13:35

标签: angularjs drop-down-menu angularjs-directive angular-ngmodel

我创建了一个select directive并且使用了这个指令两次。我需要看到两者的选定项目。我该怎么办?

HTML

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

控制器

var myApp = angular.module('myApp',[]);

myApp.controller('mainController', function($scope) {
    $scope.items = [
        {
            name: "1"
        },
        {
            name: "2"
        }
    ];

    $scope.items2 = [
        {
            name: "3"
        },
        {
            name:"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'
        }
    }
});

我需要将两个“选择”的选定项目添加到$ scope.selectedValues中。 我尝试了ng-change,但它没有用。

2 个答案:

答案 0 :(得分:1)

您的指令使用隔离范围,因此您无法从控制器访问指令或从指令访问控制器。

您必须创建一个新条目。

我告诉你一个有效的小提琴:

https://jsfiddle.net/Lv1q2sh2/1/

// 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 = [];
});

答案 1 :(得分:0)

需要正确创建指令:

  1. 拥有指令的控制器
  2. 如果您使用的是隔离范围,请确保将selectedValue传递给范围。 例如:
  3. 指令:

    CoordinateMatrix cm = new CoordinateMatrix(matrixA.rdd());
    
    BlockMatrix     mat = cm.toBlockMatrix().transpose();
    IndexedRowMatrix id = mat.toIndexedRowMatrix();
    RowMatrix        rm = id.toRowMatrix();
    
    Vector[] collectPartitions = (Vector[])rm.rows().collect();    
    

    HTML:

    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.
    })};
    

    在指令中添加链接功能,并将观察者放在ngModel上,一旦用户更改了选择,就更新了父ng-model。