将数据从指令模板组件返回到全局 $scope

Question

我想要实现的是创建一个由动态填充复选框的下拉列表组成的组件。 - 完成

这些复选框应从指令元素的属性 property-name 中获取指令内值的名称。 - 完成

他们需要 return 值（选择了哪些值）到 $scope 中的一个变量，该变量的名称与属性 my-model 相同，所以我可以从主页引用 $scope.firstTitle 和 $scope.secondTitle 就像在 plunker 中一样。 - 这是我的问题

最重要的部分是该解决方案应允许在同一页面上插入多个组件，而前一个组件的 $scope 中的变量不会被下一个组件覆盖。

我尝试寻找答案，但 none 似乎解决了我的确切问题，即从一个来源向模板填充值并将值从模板传递到 $scope。

这是我已经取得的成果的一个缩影：https://plnkr.co/edit/Uwarzh7qxrE3pDKxH2u8?p=preview

HTML:

   <div ng-app="testModule" ng-controller="componentsController">

      <div class="container col-md-3">
        <mydropdown property-name="First Title" my-model="firstTitle"></mydropdown>
      </div>

      <div class="container col-md-3">
        <mydropdown property-name="Second Title" my-model="secondTitle"></mydropdown>
      </div>

      <button class="btn btn-success" type="submit" value="Save" ng-click="testSave()">Test data output</button>
    </div>

JS:

angular.module('testModule', [])
    .controller('componentsController', ["$scope", function ($scope) {
        $scope.testSave = function() {
            console.log($scope);
        }

    }])
    .directive('mydropdown', function () {
        return {
            scope: {
                propertyName: '@',
                myModel:'='
            },
            templateUrl: 'component.html',

            link: function (scope) {

              // this will be replaced with call to service
                scope.dropDowns = [
                    {
                        value: 'test1',
                        text: 'Test1'
                    },
                    {
                        value: 'test2',
                        text: 'Test2'
                    }
                ];
            }
        }
    });

Component.html:

<div class="dropdown">
    <button class="btn btn-block btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="pull-left">{{propertyName}}</span>
        <i class="pull-right glyphicon glyphicon-triangle-bottom"></i>
    </button>
    <ul class="dropdown-menu">
        <li ng-repeat="dropDown in dropDowns">
            <div class="checkbox col-md-12">
                <label>
                    <input type="checkbox" ng-model="dropDown.value"> {{dropDown.text}}
                </label>
            </div>
        </li>
    </ul>
</div>

请帮忙。

Answer 1

将模型放入主控制器：

app.controller("mainCtrl", function() {
  var vm = this;
  vm.firstDropdowns = [
    {
      value: 'test1',
      text: 'Test1'
    },
   {
      value: 'test2',
      text: 'Test2'
    }
  ];
})

连接到模板中的组件：

   <mydropdown  my-model="vm.firstDropdowns">
   </mydropdown>

在组件中使用单向 & 绑定：

app.component('mydropdown', {
    bindings: {
        myModel: '<',
    },
    template: `
        <div ng-repeat="dropDown in $ctrl.myModel">
            <input type="checkbox" ng-model="dropDown.value" />
            {{dropDown.text}}
        </div>
    `
})

因为输入是对象，组件内的ng-model指令会更新对象的内容，父控制器会看到更改。

演示

angular.module("app",[])

.controller("mainCtrl", function() {
  var vm = this;
  vm.firstDropdowns = [
    {
      value: 'test1',
      text: 'Test1'
    },
   {
      value: 'test2',
      text: 'Test2'
    }
  ];
})

.component('mydropdown', {
    bindings: {
        myModel: '<',
    },
    template: `
        <div ng-repeat="dropDown in $ctrl.myModel">
            <input type="checkbox" ng-model="dropDown.value" />
            {{dropDown.text}}
        </div>
    `
})

  <script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="mainCtrl as vm">
    <fieldset>
       <mydropdown  my-model="vm.firstDropdowns">
       </mydropdown>
    </fieldset>
    <fieldset>
      <div ng-repeat="x in vm.firstDropdowns">
        {{x.value}} {{x.text}}
      </div>
    </fieldset>
  </body>

将数据从指令模板组件返回到全局 $scope

Returning data from directive template component to global $scope

angularjs

angularjs-directive

angularjs-scope

演示