Question

我使用角度自举模式。

填充了

termsText，scope.productTerms确实包含值。但出于某种原因，当我在模态中输出{{ productTerms }}时，该值未显示。为什么呢？

JS

$scope.openProductTerms = function (termsText) {
    $scope.productTerms = termsText <-- has a value in console.log()
    var modalInstance = $modal.open({
        templateUrl: 'myModalTerms.html',
        controller: ModalInstanceCtrl
});




var ModalInstanceCtrl = function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.dismiss('OK');
    };
};

HTML

{{ productTerms }} < ==== value shows outside modal


<script type="text/ng-template" id="myModalTerms.html">
    <div class="modal-body">

        {{ productTerms }}  <==== same value does not show insdie modal?

    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
    </div>
</script>

Answer 1

尝试在HTML中使用{{$parent.productTerms}}

根据我的经验，似乎角度引导模态创建了一个新的范围。因此，首先引用$parent，您就可以获得模型的价值。

Answer 2

模态有一个新的控制器，因此有一个新的范围。 services.js

 angular.module('services',[]).
  factory('sharedService', function($rootScope) {
    var sharedService = {};   
    sharedService.value = null;

   sharedService.prepForBroadcast = function(value) {
       this.value = value;
       this.broadcastItem();
   };

   sharedService.broadcastItem = function() {
       $rootScope.$broadcast('shared');
   };

   return sharedService;
 });

controller.js

     $scope.openProductTerms = function (termsText) {
          sharedService.prepForBroadcast(termsText);
       var modalInstance = $modal.open({
       templateUrl: 'myModalTerms.html',
       controller: ModalInstanceCtrl
     });

lastController.js

     var ModalInstanceCtrl = function ($scope, $modalInstance,sharedService) {
        $scope.$on('shared', function() {
    $scope.productTerms = sharedService.value;
    });
       $scope.ok = function () {
          $modalInstance.dismiss('OK');
        };
     };

未显示AngularJS引导模式范围值

2 个答案: