如何从创建许多 select 标签的指令将项目列表添加到控制器范围

Question

我有带 $scope.usersList
的控制器
我有创建许多 select 标签的指令
看到这个link

http://plnkr.co/edit/OueDXGRD8RWSfhklEjpN?p=preview

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


app.directive('adduser',function($compile){
  return {
    restrict: 'A',
    
    link: function(scope, elem, attr) {
      
      var tmpl = '<select class="js-select" ng-model="userItem[key]">'
                 +'<option></option>'
                 +'<option ng-repeat="item in users" value="item.id">{{item.login}}</option>'
                 +'</select>';
      scope.key = 0;          
      elem.on('click', function (e) {
          scope.users = [{id:1, login: 'admin'},{id:2, login: 'guest'}];
          var tmplCompiled = $compile(tmpl);
          e.preventDefault();
          elem.parent().prepend(tmplCompiled(scope));
          scope.key++;
      });
    }
  };
});
app.controller('AppController',function($scope){
    // pass user list here
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs_1_3_15@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
    <script data-require="angularjs_1_3_15@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-animate.min.js"></script>
    <script data-require="angularjs_1_3_15@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-aria.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.5" data-require="bootstrap@3.3.5" />
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="AppController">
      <div>
      <a adduser class="btn btn-default" href="javascript:void(0)" > Add </a>
      </div>
    </div>
    <div>{{userItem | json}}</div>
  </body>

</html>

指令生成

<select ng-model="userItem">...</select>
<select ng-model="userItem">...</select>
...

我需要获取 userItem 作为 selected 项目的列表。

如何获取？

Answer 1

检查 Plunker 上的工作演示和控制台。

我实际上完全重写了您的代码。由于这些原因，您的原始代码完全不是 Angular 风格 ：

调用 $compile（应尽可能避免）
对元素使用 click 事件
未使用 Angular 的最强功能：绑定。

请检查我的代码：

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

app.directive('adduser',function($compile){
  return {
    restrict: 'A',
    scope: {
      users: '='
    },
    template: 
      '<div>' +
        '<div ng-repeat="u in users">' +
          '<select ng-model="u.role" ng-options="r.login for r in defaultRoles"></select>' +
        '</div>' +
        '<button ng-click="add()">Add New</button>' +
      '</div>',
    controller: ['$scope', function ($scope) {
      $scope.defaultRoles = [{id:1, login: 'admin'},{id:2, login: 'guest'}];
      $scope.add = function () {
        $scope.users.push({
          role: $scope.defaultRoles[1]
        });
      };
    }]
  };
});
app.controller('AppController',function($scope){
    // pass added user list here
    $scope.users = [];
    $scope.$watch('users', function () {
      console.log($scope.users);
    }, true);
});

如何从创建许多 select 标签的指令将项目列表添加到控制器范围

How to add item list to controller scope from directive which create many select tags

javascript

select

controller

directive

angularjs