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

【问题标题】：Pass $scope.model from directive to controller (Angularjs)将 $scope.model 从指令传递给控制器（Angularjs）
【发布时间】：2015-11-18 20:50:12
【问题描述】：

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

HTML 代码- 当用户点击报告时，buildData 被执行。多选指令名称是 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 继续显示所选的最新值。

【问题讨论】：

标签： javascript jquery angularjs controller directive

【解决方案1】：

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

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

【讨论】：

@DenimChicken- 根据您提到的内容更新了我的问题。
@Ayesha 这个解决方案对我来说很好用。这里有一个小提琴给你看：jsfiddle.net/9f9kud3n
@DenimChicken- 这让我发疯了。我不知道为什么我不能得到类似的输出。当我分别有指令、控制器和模板时，它有什么不同吗？ tats wat 我现在能想到的。除了提到 $scope.selected_items >?? 之外，您是否修改了代码
@Ayesha 将它们分开并不重要。我没有修改其他任何东西。我不认为它应该有任何区别，但我在那个小提琴中使用 angular 1.3.15。
感谢您的交叉检查。我正要检查一下。我必须弄清楚为什么它对我的情况不起作用。

【解决方案2】：

model 是双向绑定的。因此，如果您将控制器中的 $scope 变量分配给模块属性，它将在所选值更改时更新。

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

【讨论】：

@SeanLarkin- 根据您提到的内容更新了我的问题。