it-swarm.com.ru

Директива AngularJS не обновляет изменения в области видимости

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

Этот код:

<layout name="Default">My cool content</layout>

Должен иметь такой вывод:

<div class="layoutDefault">My cool content</div>

Поскольку макет "По умолчанию" имеет этот код:

<div class="layoutDefault">{{content}}</div>

Вот код директивы:

app.directive('layout', function($http, $compile){
return {
    restrict: 'E',
    link: function(scope, element, attributes) {
        var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
        $http.get(scope.constants.pathLayouts + layoutName + '.html')
            .success(function(layout){
                var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g;
                var result = regexp.exec(layout);

                var templateWithLayout = result[1] + element.html() + result[2];
                element.html($compile(templateWithLayout)(scope));
            });
    }
}

});

Моя проблема:

Когда я использую переменные области видимости в шаблоне (в шаблоне макета или внутри тега макета), например. {{whatever}} это просто работает изначально. Если я обновлю переменную whatever, директива больше не будет обновляться. Вся функция ссылки будет запущена один раз.

Я думаю, что AngularJS не знает, что эта директива использует переменные области видимости, и поэтому она не будет обновлена. Но я понятия не имею, как исправить это поведение.

65
Armin

Вы должны создать связанную переменную области и наблюдать за ее изменениями:

return {
   restrict: 'E',
   scope: {
     name: '='
   },
   link: function(scope) {
     scope.$watch('name', function() {
        // all the code here...
     });
   }
};
79
QuarK

Мне нужно было решение этой проблемы, и я использовал ответы в этой теме, чтобы придумать следующее:

.directive('tpReport', ['$parse', '$http', '$compile', '$templateCache', function($parse, $http, $compile, $templateCache)
    {
        var getTemplateUrl = function(type)
        {
            var templateUrl = '';

            switch (type)
            {
                case 1: // Table
                    templateUrl = 'modules/tpReport/directives/table-report.tpl.html';
                    break;
                case 0:
                    templateUrl = 'modules/tpReport/directives/default.tpl.html';
                    break;
                default:
                    templateUrl = '';
                    console.log("Type not defined for tpReport");
                    break;
            }

            return templateUrl;
        };

        var linker = function (scope, element, attrs)
        {

            scope.$watch('data', function(){
                var templateUrl = getTemplateUrl(scope.data[0].typeID);
                var data = $templateCache.get(templateUrl);
                element.html(data);
                $compile(element.contents())(scope);

            });



        };

        return {
            controller: 'tpReportCtrl',
            template: '<div>{{data}}</div>',
            // Remove all existing content of the directive.
            transclude: true,
            restrict: "E",
            scope: {
                data: '='
            },
            link: linker
        };
    }])
    ;

Включить в свой HTML:

<tp-report data='data'></tp-report>

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

Он устанавливает наблюдение за свойством scope.data и всякий раз, когда он обновляется (когда пользователи запрашивают новый набор данных с сервера), он загружает соответствующую директиву для отображения данных.

41
Roy Milder

Вы должны сообщить Angular, что ваша директива использует переменную области видимости:

Вам необходимо привязать некоторое свойство области к вашей директиве:

return {
    restrict: 'E',
    scope: {
      whatever: '='
    },
   ...
}

а затем $watch это:

  $scope.$watch('whatever', function(value) {
    // do something with the new value
  });

Обратитесь к Угловая документация по директивам для получения дополнительной информации.

16
Paul Mougel

Я нашел гораздо лучшее решение:

app.directive('layout', function(){
    var settings = {
        restrict: 'E',
        transclude: true,
        templateUrl: function(element, attributes){
            var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
            return constants.pathLayouts + layoutName + '.html';
        }
    }
    return settings;
});

Единственный недостаток, который я вижу в настоящее время, заключается в том, что зашитые шаблоны получили собственную область видимости. Они получают значения от своих родителей, но вместо того, чтобы изменить значение в родителе, значение сохраняется в собственной новой дочерней области. Чтобы избежать этого, я сейчас использую $parent.whatever вместо whatever.

Пример:

<layout name="Default">
    <layout name="AnotherNestedLayout">
        <label>Whatever:</label>
        <input type="text" ng-model="$parent.whatever">
    </layout>
</layout>
8
Armin

Вы должны следить за своей областью.

Вот как вы можете это сделать:

<layout layoutId="myScope"></layout>

Ваша директива должна выглядеть так

app.directive('layout', function($http, $compile){
    return {
        restrict: 'E',
        scope: {
            layoutId: "=layoutId"
        },
        link: function(scope, element, attributes) {
            var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
            $http.get(scope.constants.pathLayouts + layoutName + '.html')
                .success(function(layout){
                    var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g;
                    var result = regexp.exec(layout);

                    var templateWithLayout = result[1] + element.html() + result[2];
                    element.html($compile(templateWithLayout)(scope));
        });
    }
}

$scope.$watch('myScope',function(){
        //Do Whatever you want
    },true)

Точно так же вы можете моделировать в вашей директиве, поэтому, если модель обновляется автоматически, ваш метод watch обновит вашу директиву.

2
Aditya Sethi

Я знаю, что это старая тема, но в случае, если кто-то найдет это, как я:

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

директива: 

directive('dateRangePrint', function(){
    return {
        restrict: 'E',
        scope:{
        //still using the single dir binding
            From: '@rangeFrom',
            To: '@rangeTo',
            format: '@format'
        },
        controller: function($scope, $element){

            $scope.viewFrom = function(){
                    return formatDate($scope.From, $scope.format);
                }

            $scope.viewTo = function(){
                    return formatDate($scope.To, $scope.format);
                }

            function formatDate(date, format){
                format = format || 'DD-MM-YYYY';

                //do stuff to date...

                return date.format(format);
            }

        },
        replace: true,
        // note the parenthesis after scope var
        template: '<span>{{ viewFrom() }} - {{ viewTo() }}</span>'
    }
})
1
slappy-x

Мы можем попробовать это

$scope.$apply(function() {
    $scope.step1 = true;
    //scope.list2.length = 0;
});

http://jsfiddle.net/Etb9d/

0
build-1

Простое решение - сделать переменную области видимости object . Затем получите доступ к содержимому с помощью {{ whatever-object.whatever-property }}. Переменная не обновляется, потому что JavaScript передает Primitive type by value . Принимая во внимание, что Объект передается ссылка , которая решает проблему.

0
Yohe