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

Question

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

0

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

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, и она будет отражать модальность. Но я не могу этого сделать. Поскольку я очень новый об этом Угловом, у меня все еще есть проблемы с пониманием его механики, поэтому любые конкретные детали будут действительно хороши для меня. Любые рекомендации?

bahadircyildiz 24 авг. 2015, в 13:39

Источник

Теги:

javascript

angularjs

angularjs-directive

1 ответ

Ещё вопросы

Paul Boutes · Accepted Answer · 2015-08-24T10-25-00.000Z

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

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

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

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

контроллер

  (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);

})();

Затем вы можете вызвать свою директиву в свой 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>

Вы можете увидеть Рабочий Плункер

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