将指令表单字段绑定到根作用域变量的最佳方法

时间:2016-05-23 02:25:58

标签: angularjs service binding scope directive

我创建了一个处理表单输入组的指令。每个输入都需要绑定到根范围变量。我建立了一个工厂来存储变量,以便我可以在主控制器和指令中使用它们。

到目前为止,我已经将数据填充到表单字段(每个字段中的所有相同数据)。但我通过指定字段名称来做到这一点。为了让指令的每个实例显示不同的数据,我可以发送它应该绑定到的字段的名称,但如果我在ng-model中使用它,则会抛出错误。

此外,即使我对该字段进行硬编码,它也只是一种单向绑定。

    var app = angular.module('myApp', []);
    app.controller('mainCtl', function($scope, sharedData){
        $scope.otherdata = "main scope";$scope.test = sharedData.data1;
    }).service('sharedData', function(){
        this.data1 = 600;
      this.data2 = 700;
    }).directive('myDir', function(sharedData){
        return {
      restrict: 'E',
        replace: 'true',
        templateUrl: 'my-dir',
        scope: {
        bindTo: '=',
            showMe: '='
        },
        link: function(scope, element, attrs){
            scope.data1 = sharedData.data1;
          scope.data2 = sharedData.data2;
        }
      };

此处缩短示例:https://jsfiddle.net/wkaskie/najnkga4/12/在小提琴中,我将它与data1的单向绑定放在一起。我需要传入一个变量来指示每个输入应绑定到哪个字段。

1 个答案:

答案 0 :(得分:0)

更新好消息,经过12个小时的研究和测试,我想出了一个解决方案。

  1. 更多地考虑控制器。我创建了一个新的控制器来处理数据子集并将其附加到指令。

    app.controller('subCtl',function($ scope,sharedData){ this.sData = sharedData; })。directive('myDir',function(sharedData){ 返回{ 限制:'E', 替换:'true', templateUrl:'my-dir', bindToController:true, 控制器: 'subCtl', controllerAs:'sub', //...

  2. 就在点上。很多建议我发现是使用点符号,所以我做了,并修复了大多数绑定问题。换句话说,不是绑定特定数据变量,而是绑定整个daggone对象,其中包括数据点。 from:scope.data1 = sharedData.data1; to:scope.allData = sharedData; (包括sharedData.data1,sharedData.data2)

  3. 记住括号。另外,我最大的愿望是能够告诉我的指令的每个实例来模拟不同数据字段的输入字段。使用括号表示法有助于清除这一点。这个概念很简单,就像将基本的JavaScript表达式传递给ng-model。

  4. 我已经更新了小提琴以演示更改。