作用域变量未反映在指令中

Question

我正在尝试填充body属性，因此我的模块将其打印为它的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并将其反映到模式。 但是我做不到。 由于我对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>

您可以看到工作柱塞

作用域变量未反映在指令中

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-08-24 12:50:17

作用域变量未反映在指令中

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-08-24 12:50:17

解决方案1
0 已采纳 2015-08-24 12:50:17