Блог

Я определил одну переменную в контроллере и присвоил это значение одному атрибуту пользовательской директивы. Итак, на основе этого значения я показываю шаблон модального поля. Теперь, если я нажму кнопку отмены из шаблона модального поля, он вызовет одну функцию из контроллера, которая изменяет значение переменной на false, но не скрывает всплывающее окно. Пожалуйста, помогите мне это исправить.

 (function () {
'use strict';

angular.module('module1').directive('myDirective', function () {
    function linkFunction(scope, elem, attrs) {
        //scope.openvalue   = attrs.openvalue;
        scope.closevalue = false;
        scope.close = function () {
            console.log("Inside Close");
            scope.openvalue = false;
            scope.closevalue = false;
        };
    };

    return {
        templateUrl: 'confirmTemplate.html',
        restrict: 'E',
        link: linkFunction,
        scope: {
            confirmtext: '@',
            openvalue: '=',
            closeconfirm: 'amp;',
            submitconfirm: 'amp;'
        },
        controller: ['$scope', function ($scope) {
            $scope.$watch('openvalue', function () {
                console.log("OpenValue : "   $scope.openvalue);
            });
        }]
    };
 });
})();
  

Ниже приведен HTML-код для открытия этого модала.

 <div class="col-xs-12 options" ng-click="cntrl.flag1 = true">
  <div class="row">
    <myDirective openvalue="cntrl.flag1" confirmtext="This is the text from directive"
                 closeconfirm="cntrl.closeconfirm()" submitconfirm="cntrl.submitconfirm()"></myDirective>
    <div class="col-xs-9 no-left-right-padding">My text</div>
  </div>
</div>
  

И я хочу, чтобы обновленное значение openvalue было внутри шаблона html, но оно не работает.

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

В области AngularJS любое изменение унаследованной переменной в дочерней области создаст локальную версию.

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

Вы можете просто добавить console.log($scope.$id); контроллер и функцию, тогда вы сможете увидеть, что идентификатор области отличается.

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

Основываясь на вашем коде, быстрое решение — назначить cntrl объект в директиву, которая гарантирует, что ваша директива ссылается на тот же объект.

Измените свой модальный на

 <myDirective cntrl="cntrl" confirmtext="This is the text from directive"></myDirective>
  

в вашей директиве

 scope: {
    confirmtext   : '@',
    cntrl     : '='
},
  

в вашей linkфункции

 function linkFunction(scope, elem, attrs){
    scope.close = function(){
        scope.cntrl.flag1 = false;
    }
  

вы все еще можете получить доступ closeconfirm к and submitconfirm с помощью $scope.cntrl.closeconfirm и $scope.cntrl.submitconfirm соответственно.