DEMO

Question

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

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

他们需要将值（选择了哪些值）返回到$scope中的变量，该变量的名称与属性my-model相同，因此我可以从引用{的主页读取它在plunker中{1}}和$scope.firstTitle。 - 这是我的问题

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

我已尝试搜索答案但似乎没有解决我的确切问题，即将值从一个源填充到模板并将值从模板传递到$scope。

以下是我已经取得的成就：https://plnkr.co/edit/Uwarzh7qxrE3pDKxH2u8?p=preview

HTML：

$scope

JS：

   <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>

Component.html：

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

请帮忙。

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指令将更新对象的内容，并且父控制器将看到更改。

DEMO

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

1 个答案:

DEMO