【问题标题】:Best way to bind directive form fields to root scope variables将指令表单字段绑定到根范围变量的最佳方法
【发布时间】:2016-09-19 18:57:51
【问题描述】:

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

到目前为止,我已经让数据填充表单字段(每个字段中的所有相同数据)。但我通过指定字段名称来做到这一点。为了让指令的每个实例显示不同的数据,我可以发送它应该绑定的字段的名称,但如果我在 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 的单向绑定的位置。我需要传入一个变量来指示每个输入应该绑定到哪个字段。

【问题讨论】:

    标签: angularjs service binding scope directive


    【解决方案1】:

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

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

      app.controller('subCtl', function($scope, sharedData){ this.sData = sharedData; }).directive('myDir', function(sharedData){ 返回 { 限制:'E', 替换:'真', templateUrl: '我的目录', 绑定控制器:真, 控制器:'subCtl', 控制器作为:'子', //...

    2. 恰到好处。我发现很多建议是使用点表示法,所以我这样做了,并且解决了大多数绑定问题。换句话说,我没有绑定特定的数据变量,而是绑定了整个 daggone 对象,其中包括数据点。 来自:scope.data1 = sharedData.data1; 到:scope.allData = sharedData; (包括sharedData.data1、sharedData.data2)

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

    我已更新小提琴以演示更改。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-10-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多