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

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