Значение внутри {{}} не обновлено в угловых - PullRequest
Новая
       23

Значение внутри {{}} не обновлено в угловых

0 голосов
/ 05 декабря 2018

Существует функция, в которой мы используем вложенные угловые директивы.Я добавляю упрощенный пример, где поведение можно наблюдать.

Вот HTML: 

<body ng-app="myapp">
    <div>
        This is the first directive
        <first-directive my-val="9">
        </first-directive>
    </div>
</body>

И JavaScript: 

var app = angular.module("myapp",[]);
app.directive("firstDirective",function(){
    return {
            template:'<second-directive val-new={{myVal}}></second-directive>',
            scope:{
                myVal:'@'
            },
            //transclude:true,
            link: {
                pre:function(scope,elem,attr){
                        scope.myVal=scope.myVal+"1";
                    }
            }
    }
});

app.directive("secondDirective",function(){
    return{
        scope:{
            valNew:'@'
        },

        link:{
            pre:function(scope,elem,attr){
                    console.log(scope.valNew);
                }
        }
    }
});

В консоли яполучить результат обновления, выполненного в методе pre, но в html я получаю старое значение.

Консоль печатает: "91" html dom содержит: 

    <second-directive val-new="9" class="ng-isolate-scope"></second-directive>>

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

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Переместить вычисление в шаблон: 

var app = angular.module("myapp",[]);
app.directive("firstDirective",function(){
    return {
            ̶t̶e̶m̶p̶l̶a̶t̶e̶:̶'̶<̶s̶e̶c̶o̶n̶d̶-̶d̶i̶r̶e̶c̶t̶i̶v̶e̶ ̶v̶a̶l̶-̶n̶e̶w̶=̶{̶{̶m̶y̶V̶a̶l̶}̶}̶>̶<̶/̶s̶e̶c̶o̶n̶d̶-̶d̶i̶r̶e̶c̶t̶i̶v̶e̶>̶'̶
            template:'<second-directive val-new="{{myVal+'1'}}"></second-directive>',
            scope:{
                myVal:'@'
            },
            //transclude:true,
            link: {
                pre:function(scope,elem,attr){
                    ̶s̶c̶o̶p̶e̶.̶m̶y̶V̶a̶l̶=̶s̶c̶o̶p̶e̶.̶m̶y̶V̶a̶l̶+̶"̶1̶"̶;̶
                }

            }
    }
});

Привязка атрибута ('@') создает наблюдатель, который копирует значение из шаблона в область выделения каждый цикл дайджеста.Модификация scope.myVal в функции preLink будет переопределена наблюдателем в следующем цикле дайджеста.

0 голосов
/ 05 декабря 2018

проблема в том, что вы передаете переменные только для значений с ' @ ', если вы замените его на ' = ', они будутпередается как переменная и будет обновляться

, поэтому измените свой код следующим образом 

app.directive("firstDirective",function(){
    return {
            template:'<second-directive val-new="myVal"></second-directive>',
            scope:{
                myVal:'='
            },
            //transclude:true,
            link: {
                pre:function(scope,elem,attr){
                        scope.myVal=scope.myVal+"1";
                    }
            }
    }
});

app.directive("secondDirective",function(){
    return{
        scope:{
            valNew:'='
        },

        link:{
            pre:function(scope,elem,attr){
                    console.log(scope.valNew);
                }
        }
    }
});
...