Передача переменных из текущей области в скомпилированную директиву

Я пытаюсь передать переменную из текущей области в директиву, добавленную через службу $ compile.

Я могу передать строку в дочернюю директиву, но не фактический объект.

Вот сценарий со сценарием: http://jsfiddle.net/ewx2trvx/2/

HTML:

<section ng-app="myApp" ng-controller="MainCtrl">
    <addbuttonsbutton></addbuttonsbutton>
    <div id="space-for-buttons"></div>
</section>

JS:

var myApp = angular.module('myApp', []);

function MainCtrl($scope) {
    $scope.count = 0;
}

myApp.directive("addbuttonsbutton", function () {
    return {
        restrict: "E",
        template: "<button addbuttons>Click to add buttons</button>"
    }
});

//Directive for adding buttons on click that show an alert on click
myApp.directive("addbuttons", function ($compile) {
    return function (scope, element, attrs) {
        element.bind("click", function () {
            scope.count++;
            angular.element(document.getElementById('space-for-buttons'))
                .append($compile("<alert alert='count'></alert>")(scope));
        });
    };
});

//Directive for showing an alert on click
myApp.directive("alert", function () {
    return {
        template: "<div><button class='btn btn-default'>Show alert # {{count}}</button></div>",
        scope: {
            a: '@alert'
        },
        replace:true,        
        link: function (scope, element, attrs) {
            element.bind("click", function () {
                console.log(scope.a);
                alert("This is alert #" + scope.a);
            });
        }
    };
});

Есть мысли?

Спасибо.

7 голосов | спросил sirrocco 21 PMpTue, 21 Apr 2015 12:03:54 +030003Tuesday 2015, 12:03:54

2 ответа


0

Во-первых, вам нужно применять область видимости после компиляции и добавления, поскольку вы манипулируете DOM вне цикла дайджеста:

element.bind("click", function () {
    scope.count++;
    angular.element(document.getElementById('space-for-buttons'))
        .append($compile("<alert alert='count'></alert>")(scope));
    scope.$apply();
});

Тогда, поскольку вы используете alert='count', вам необходимо изменить конфигурацию области в alert директива:

scope: {
    a: '=alert'
},

В противном случае, если вы используете a: '@alert', вам необходимо интерполировать его в атрибуте следующим образом: alert='{{count}}'

И наконец, поскольку существует двусторонняя привязка данных, вы можете назначить еще одно свойство промежуточного примитива для использования в качестве индекса кнопки:

myApp.directive("alert", function () {
    return {
        template: "<div><button class='btn btn-default'>Show alert # {{index}}</button></div>",
        scope: {
            a: '=alert'
        },
        replace:true,        
        link: function (scope, element, attrs) {
            scope.index = scope.a;
            element.bind("click", function () {
                alert("This is alert #" + scope.index);
            });
        }
    };
});

Демо: http://jsfiddle.net/ewx2trvx/3/

ответил dfsq 23 PMpThu, 23 Apr 2015 13:05:35 +030005Thursday 2015, 13:05:35
0

Вам нужно интерполировать значение, чтобы передать его, иначе angular предполагает, что вы хотите, чтобы там была строка.

Измените $compile("<alert alert='count'></alert>")(scope) на $compile("<alert alert='{{count}}'></alert>")(scope) а затем преобразовать полученную строку в число: var count = +scope.a;.

Дополнительно внутри вашего шаблона измените {{count}} на {{a}} потому что у вас есть изолированная область видимости.

Обратите внимание, что в Angular 1.2 нет одноразовой привязки. Если вы используете 1.3, вы можете одноразово связать с {{::count}}.

ответил Rouby 23 PMpThu, 23 Apr 2015 13:00:31 +030000Thursday 2015, 13:00:31

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132