将 $scope.model 从指令传递给控制器 (Angularjs)

Question

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

HTML 代码 - 当用户点击 Report 时，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。用户可以使用此指令 select 多个选项。 $scope.model 给出用户 select 编辑的 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;
        };

    }
}
});

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

'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。它只给出一次 selected 项目列表。一旦我点击报告按钮，它就会给出列表。如果我再次开始单击并取消 selecting 列表项，它仍会显示以前的值。不是现在的。

$scope.model 继续显示最新值 selected。

Answer 1

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

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

Answer 2

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

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

将 $scope.model 从指令传递给控制器 (Angularjs)

Pass $scope.model from directive to controller (Angularjs)

javascript

jquery

controller

directive

angularjs

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

Pass $scope.model from directive to controller (Angularjs)

javascript

jquery

controller

directive

angularjs

将 $scope.model 从指令传递给控制器 (Angularjs)