Лучший способ связать поля формы директивы с корневыми переменными области видимости

0

Я создал директиву для обработки групп ввода форм. Каждый вход должен быть привязан к переменной области корня. Я создал фабрику для хранения переменных, чтобы я мог использовать их в основном контроллере и директиве.

До сих пор я дошел до того, что данные заполняют поля формы (все одни и те же данные в каждом поле). Но я делаю это, указав имя поля. Чтобы каждый экземпляр директивы отображал разные данные, я могу отправить имя поля, к которому он должен привязываться, но он выдает ошибку, если я использую его в ng-модели.

Кроме того, даже когда я жестко программирую поле, это только односторонняя привязка.

    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. Мне нужно передать переменную, чтобы указать, в какое поле должен быть связан каждый вход.

Теги:
scope
binding
service
directive

1 ответ

0

ОБНОВЛЕНИЕ Хорошие новости, после 12 часов исследований и тестирования, я придумал решение.

  1. Рассмотрим контроллеры больше. Я создал новый контроллер для обработки подмножества данных и привязал его к директиве.

    app.controller('subCtl', function ($ scope, sharedData) {this.sData = sharedData;}). директива ('myDir', function (sharedData) {return {restrict: 'E', replace: 'true', templateUrl: 'my-dir', bindToController: true, controller: 'subCtl', controllerAs: 'sub',//...

  2. Прямо на точке. Много советов, которые я нашел, это использовать точечную нотацию, поэтому я сделал и исправил большинство проблем, связанных с привязкой. Другими словами, вместо привязки конкретных переменных данных я связал весь объект daggone, который включал точки данных. from: scope.data1 = sharedData.data1; to: scope.allData = sharedData; (который включает sharedData.data1, sharedData.data2)

  3. Помните скобки. Кроме того, мое большое желание состояло в том, чтобы сообщить каждому экземпляру моей директивы моделировать поле ввода в другом поле данных. Использование обозначения в виде скобок помогло прояснить это. Концепция была простой, как передача базового выражения JavaScript в ng-model.

Я обновил скрипт для демонстрации изменений.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню