Question

我试图填充body属性，因此我的模块会将其打印为它的正文部分，但我不知道为什么它不起作用，即使我尝试了$ scope。 $ apply（）在几个地方。

＆＃13;

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

＆＃13;

<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>

＆＃13;

正如您所看到的，在我点击链接后，它将更改变量$ scope.text，它将反映到模态。但我无法做到这一点。由于我对这个Angular很新，我仍然有理解其机制的麻烦，所以任何具体的细节对我来说都是非常好的。有什么建议吗？

Answer 1

检索attrs.body时，您正在检索未定义数据。

您可以使用工厂来共享您的数据。您必须知道所有角度服务都是单例，因此只有一个给定服务的实例。

由于这个原因，您可以轻松地在控制器和指令之间共享数据。

因此，当您在Controller中触发操作时，您将数据设置到工厂中，然后您可以将数据检索到指令中。

<强>控制器

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

您可以看到Working Plunker

范围变量不反映在指令中

1 个答案: