将$ scope.model从指令传递到控制器（Angular.js）

Question

我检查了所有其他帖子并相信我，这不是重复的。 希望可以有人帮帮我。 这是代码。

HTML代码-用户单击“报表”时，buildData被执行。 multiselect指令名称为mu-ls。

<button ng-click="buildData(selected_items)">Report</button>
<div>Universe:</div>
<div><mu-ls pre-selected="member.roles" model="selected_items" options="roles"></muls></div>

指令代码-指令名称为muLs。 用户可以使用此指令选择多个选项。 $ scope.model给出用户选择的ID数组。

angular.module('Select').directive('muLs', function () {
  return {
    restrict: 'E',
    scope: {
        model: '=',
        options: '=',
        pre_selected: '=preSelected'
    },
    template: "<div data-ng-class='{open: open}'>" +
                        "<button data-ng-click='open=!open;openDropdown()'>Select...</button>" +
                            "<ul aria-labelledby='dropdownMenu'>" +
                                "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +
                            "</ul>" +
                    "</div>",

    controller: function ($scope) {

        $scope.openDropdown = function () {
            $scope.selected_items = [];
            for (var i = 0; i < $scope.pre_selected.length; i++) {
                $scope.selected_items.push($scope.pre_selected[i].id);
            }
        };

        $scope.setSelectedItem = function () {
            var id = this.option.id;
            if (_.contains($scope.model, id)) {
                $scope.model = _.without($scope.model, id);
            } else {
                $scope.model.push(id);
            }
            console.log($scope.model);
            return false;
        };

        $scope.isChecked = function (id) {
            if (_.contains($scope.model, id)) {
                return 'glyphicon glyphicon-ok pull-right';
            }
            return false;
        };

    }
}
});

控制器代码-该代码应在控制器端显示上面列出的所选项目的列表。 目前显示未定义。

'use strict'
var Modd= angular.module('Select', []);
Modd.controller('SelectController', function ($scope, $timeout, $rootScope) {

  $scope.roles = [
    { "id": 1, "name": "USA" },
    { "id": 2, "name": "France" },
    { "id": 3, "name": "Russia" }
  ];

  $scope.member = { roles: [] };
  $scope.selected_items = [];

  $scope.buildData = function (selected_items) {
    console.log("This is", $scope.model); 
  }
});

问题-如何在控制器端使用此指令值$ scope.model？ 请建议大家！

我首先尝试了$ scope.selected_items。 它仅列出一次选定项目。 单击“报告”按钮后，它将给出列表。 如果我再次开始单击并取消选择列表项，它仍然会显示以前的值。 不是当前的。

$ scope.model继续显示所选的最新值。

Answer 1

model是双向的。 因此，如果您将$scope变量从控制器分配给模块属性，则当所选值更改时，该变量将被更新。

因此，您可以console.log($scope.selected_items);

Answer 2

您正在将selected_items传递给指令，因此它将包含控制器中的model值。

$scope.buildData = function () {
    console.log("This is", $scope.selected_items);
}