Связывание массива с директивой переменной в AngularJS

Я пытаюсь получить массив в шаблон, чтобы использовать его значения. Моя проблема заключается в том, что атрибут превращается в строку один раз внутри моего шаблона, поэтому он больше не доступен как {{var [0]}} и вместо этого будет возвращать первый символ "строки", обычно "["

Вот упрощенная настройка данных:

"varForward": ["100", "1"],
"varBack": ["1", "100"]

Вот упрощенная часть HTML файла, который взаимодействует с этими данными:

<my-customer-vars value="{{varForward}}">
    </address-numbers>
<my-customer-vars value="{{varBack}}">
    </address-numbers>

и, наконец, вот часть, которая SUPPOSED для замены пользовательского тега моими собственными вещами:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "@"
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

Итак, вот, если я пытаюсь использовать значение [0], я получаю [Если я пытаюсь получить значение [1], я получаю "и т.д. Есть ли помощь в использовании массивов внутри шаблона директивы?

Ответы

Ответ 1

Вам нужно изменить "@" на "=" и передать в массив без {{}}

вот так:

<my-customer-vars value="varForward">
    </my-customer-vars>
<my-customer-vars value="varBack">
    </my-customer-vars>

:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "="
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

Это происходит потому, что каждое выражение внутри атрибута directuve, определяемое символом @, оценивается как только как строка, и, наоборот, оно оценивается как обязательное выражение. (с двухсторонним связыванием, поэтому будьте осторожны).

Ответ 2

Если вы предпочитаете не создавать область выделения в директиве (например, при создании собственных директив проверки), вы можете передать массив как:

<my-customer-vars model="varForward">

И затем прочитайте значение в функции связывания директивы как:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        link: function (scope, elm, attrs, ctrl) {
            var myVars = scope[attrs.model]; // <--- took a time to figure out
            console.log(myVars);
        }
    }
});

Ответ 3

Чтобы добавить к ответу Danita, вам нужно будет использовать $eval для получения этой переменной области видимости:

Просто измените

var myVars = scope[attrs.model];

to

var myVars = scope.$eval(attrs.model);

Ответ 4

Еще одна перспектива - если проблема заключается в управлении массивом строк в приложении angular, я бы использовал одно из следующих (или любых подобных):

Если вы не практикуете создание собственных angular директив (тогда просто игнорируйте мой ответ)