переменная scope не отражена в директиве

Я пытаюсь заполнить атрибут body, поэтому мой модуль будет печатать его как часть тела, но я понятия не имею, почему он не работает, даже я пробовал $ scope. $ Apply() в нескольких местах.переменная scope не отражена в директиве

var app = angular.module('ClientLogger', ['ngRoute']) 
 

 
app.controller('global', function($scope, $compile) { 
 
    $scope.window = window 
 
    $scope.sampletext = "sampleText"; 
 

 

 
    $scope.showModal = false; 
 

 
    $scope.toggleModal = function(text) { 
 
    $scope.text = text; 
 
    $scope.showModal = !$scope.showModal; 
 
    }; 
 
}); 
 
app.directive('modal', function() { 
 
    return { 
 
    template: '<div class="modal fade">' + 
 
     '<div class="modal-dialog">' + 
 
     '<div class="modal-content">' + 
 
     '<div class="modal-header">' + 
 
     '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
 
     '<h4 class="modal-title">{{ title }}</h4>' + 
 
     '</div>' + 
 
     '<div class="modal-body" ng-transclude> {{ body }} </div>' + 
 
     '</div>' + 
 
     '</div>' + 
 
     '</div>', 
 
    restrict: 'E', 
 
    transclude: true, 
 
    replace: true, 
 
    scope: true, 
 
    link: function postLink(scope, element, attrs) { 
 
     scope.title = attrs.title; 
 

 
     scope.body = attrs.body; 
 

 
     scope.$watch(attrs.visible, function(value) { 
 
     if (value == true) 
 
      $(element).modal('show'); 
 
     else 
 
      $(element).modal('hide'); 
 
     }); 
 

 
     $(element).on('shown.bs.modal', function() { 
 
     scope.$apply(function() { 
 
      scope.$parent[attrs.visible] = true; 
 
     }); 
 
     }); 
 

 
     $(element).on('hidden.bs.modal', function() { 
 
     scope.$apply(function() { 
 
      scope.$parent[attrs.visible] = false; 
 
     }); 
 
     }); 
 
    } 
 
    }; 
 
});

<body ng-app='ClientLogger' ng-controller='global'> 
 
    <a class="btn btn-default" ng-click="toggleModal(sampletext)"> sample </a> 
 
    <modal title="Message Details" body="{{text}}" visible="showModal"></modal> 
 

 
</body>

Как вы можете видеть, после того, как я нажимаю на ссылку, он будет изменять переменную $ scope.text и она будет отражать в модальной. Но я не могу этого сделать. Поскольку я очень новый об этом Угловом, у меня все еще есть проблемы с пониманием его механики, поэтому любые конкретные детали будут действительно хороши для меня. Какие-нибудь рекомендации?

источник

2015-08-24 bahadircyildiz

Когда вы получаете attrs.body, вы получаете не определено данных.

Вы можете использовать Завод, чтобы разделить ваши данные. Вы должны знать, что все угловые службы - это одиночные игры, поэтому есть только один экземпляр данной службы.

Благодаря этому вы можете легко делиться своими данными между вашим контроллером и вашей директивой.

Поэтому, когда вы активируете действие в своем контроллере, вы установите свои данные на свой завод, после чего вы сможете получить данные в своей директиве.

Контроллер

(function(){ 

    function Controller($scope, Service) { 

    $scope.myText = 'sample'; 

    $scope.showModal = false; 

    $scope.toggleModal = function() { 
     //Set the myText value by using our Service.set() method 
     Service.set($scope.myText); 
     $scope.showModal = !$scope.showModal; 
    }; 

    } 

    angular 
    .module('app', []) 
    .controller('ctrl', Controller); 

    })();

Сервис

(function(){ 

    function Service(){ 

    var data; 

    function set(value){ 
     data = value; 
    } 

    function get(){ 
     return data; 
    } 

    return { 
     get: get, 
     set: set 
    }; 

    } 

    angular 
    .module('app') 
    .factory('Service', Service); 

})();

Директива

(function(){ 

    function modal(Service) { 
    return { 
     template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
      '<div class="modal-content">' + 
      '<div class="modal-header">' + 
      '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
      '<h4 class="modal-title">{{ title }}</h4>' + 
      '</div>' + 
      '<div class="modal-body"> {{ body }} </div>' + 
      '</div>' + 
      '</div>' + 
      '</div>', 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     scope: true, 
     link: function (scope, element, attrs) { 

      scope.title = attrs.title; 

      scope.$watch(attrs.visible, function(value) { 
      value 
      //Retrieve your data by using Service.get() method, and show our modal 
      ? (scope.body = Service.get(), $(element).modal('show')) 
      : $(element).modal('hide') 
      }); 

      $(element).on('shown.bs.modal', function() { 
      scope.$apply(function() { 
       scope.$parent[attrs.visible] = true; 
      }); 
      }); 

      $(element).on('hidden.bs.modal', function() { 
      scope.$apply(function() { 
       scope.$parent[attrs.visible] = false; 
      }); 
      }); 
     } 

     }; 
    } 

angular 
    .module('app') 
    .directive('modal', modal); 

})();

Затем, вы можете позвонить йо ur в ваш HTML.

HTML

<body ng-app='app' ng-controller="ctrl"> 
    <input type="text" ng-model="myText"> 
    <a class="btn btn-default" ng-click="toggleModal()"> sample </a> 
    <modal title="Message Details" visible="showModal"></modal> 
</body>

Вы можете увидеть Working Plunker

источник

2015-08-24 12:50:17

вам, сэр, это замечательно! Поскольку стиль написания был чем-то другим, чем мой, это заняло много времени, но теперь оно работает как шарм. Большое спасибо за подробное объяснение. – bahadircyildiz

Добро пожаловать :) –

переменная scope не отражена в директиве

ответ

Смежные вопросы