作用域变量没有反映在指令中

scope variable isn't reflected in directive

本文关键字：指令 变量 作用域      更新时间：2023-09-26

我试图填充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。文本，它将反映到模态。但我做不到。因为我是Angular的新手，所以我在理解它的机制方面仍然有困难，所以任何具体的细节都会对我很有帮助。你有什么推荐吗?

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

你可以使用Factory来共享你的数据。你必须知道所有的angular服务都是单例的，所以一个给定的服务只有一个实例。

多亏了这个，你可以很容易地在你的控制器和你的指令之间共享数据。

所以当你在你的控制器中触发一个动作时，你会将你的数据设置到你的工厂中，然后你可以将你的数据检索到你的指令中。

控制器

  (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中调用你的指令。

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

你可以看到工作活塞

相关文章：