将$ scope.model从指令传递给控制器​​（Angularjs）

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