在模式引導彈出關閉後，AngularJS $ scope.variable不會更改

爲什麼在引導彈出窗口關閉後$scope.Templt_Kind_ID不會更改？注意：我不關閉彈出窗口，直到從彈出窗口中檢索下拉值。

我使用編輯控件調用引導彈出窗口。用戶更改下拉列表值後，它會調用的$scope.onSelectChangeTemplate_kind = function() 在下面的功能，

var ddlID = $scope.selectedCountry; contains the correct value. 
$scope.Templt_Kind_ID = ddlID; // << $scope.Templt_Kind_ID = 34 as it should be

在關閉彈出窗口，我預計$scope.Templt_Kind_ID = 34 但它包含-1這是它第一次初始化。

爲什麼？ $scope.Templt_Kind_ID應該=

的JavaScript

app.controller('APIController', function ($scope, $window, $element, $log, $http, APIService) { 
    $scope.Templt_Kind_ID = -1; // << Initial value 

// Bootstrap popup. After dropdown in bootstrap is changed, this is called. 
// I tried a number of things including $scope.onSelectChangeTemplate_kind = function ($scope) 
$scope.onSelectChangeTemplate_kind = function() { 
    var ddlID = $scope.selectedCountry; // << contains correct value 
    $scope.Templt_Kind_ID = ddlID; // << $scope.Templt_Kind_ID = 34 as it should be 
} 

// Bootstrap popup is closed. 
// Why is $scope.Templt_Kind_ID=-1 although it shuold be 34 ????? 
// Why is $scope.Templt_Kind_ID=-1 although it shuold be 34 ????? 
$scope.hide = function() { 
     console.log('model one hidden Templt_Kind_ID=' + 
$scope.Templt_Kind_ID); // <<<<<< 
     // << $scope.Templt_Kind_ID is still -1 although it shuold be 34 
     $scope.showModal1 = false; 
} 
}) 

<html> 
<modal-body> 
    <div ng-controller="APIController"> 
     <select id="ddlSelectedCountry" ng-model="selectedCountry" ng-change="onSelectChangeTemplate_kind()"> 
      @*3-SP Insert*@ 
      <option value="">Select Account</option> 
      <option 
        ng-model="selectedCountry" 
        ng-repeat="item in list_Template_kind" value="{{item.Templt_Kind_ID}}" 

        > 
       {{item.Templt_Kind_ID}}-{{item.Templt_Kind_Name}} 
      </option> 
     </select> 
    </div> 
</modal-body> 
</html>

來源

2017-04-12 JenniferWalters

爲什麼你有'NG-模型=選擇的「選項」上的「selectedCountry」？ –

當你在'hide（）'函數中添加'console.log（'隱藏一個Templt_Kind_ID ='+ $ scope.selectedCountry'）模塊時，你會看到什麼？ –

>>爲什麼你在選擇的選項上有ng-model =「selectedCountry」？我討厭說，但我一直在這一天工作了一天半，不記得爲什麼我把它放在那裏。 >>當你添加console.log時，你會看到什麼（'隱藏一個模型的Templt_Kind_ID ='+ $ scope.selectedCountry）; -1 – JenniferWalters

正如我在評論中建議，您可以使用本機角模塊。

在這裏，您打開模式和選擇模板，當您單擊OK模態返回選定模板回控制器：

var app = angular.module('app', ['ui.bootstrap']); 
 

 
app.controller('ctrl', ['$scope', '$uibModal', '$log', function($scope, $uibModal, $log) { 
 
    // function to open the Modal from the view, the function accept "selection" argument that will be sent to the model's controller 
 
    $scope.openModal = function (selection) { 
 
    var modalInstance = $uibModal.open({ 
 
     templateUrl: 'modal.html', 
 
     resolve: { 
 
      // Pass a pre selection template to the Model's controller (pass null if you don't want to pre select) 
 
      selection: function() { return selection; } 
 
     }, 
 
     controller: function($scope, $uibModalInstance, selection) { 
 
      // save the preselected template and display it on the model's select box 
 
      $scope.selectedTemplate = selection; 
 

 
      // Mock of the actual list of templates 
 
      $scope.list_Template_kind = [ 
 
       { Templt_Kind_ID: 1, Templt_Kind_Name: 'Template 1' }, 
 
       { Templt_Kind_ID: 2, Templt_Kind_Name: 'Template 2' }, 
 
       { Templt_Kind_ID: 3, Templt_Kind_Name: 'Template 3' }, 
 
       { Templt_Kind_ID: 4, Templt_Kind_Name: 'Template 4' } 
 
      ]; 
 

 
      // OK button was clicked 
 
      $scope.ok = function() { 
 
       // Send the selected template back to the main controller 
 
       $uibModalInstance.close($scope.selectedTemplate); 
 
      }; 
 

 
      // CANCEL button was clicked 
 
      $scope.cancel = function() { 
 
       $uibModalInstance.dismiss('cancel'); 
 
      }; 
 
     } 
 
    }); 
 

 
    // The "$uibModal.open()" returns a promise that resolves when called "$uibModalInstance.close()" from the model's controller 
 
    // or rejected when you call "$uibModalInstance.dismiss()". 
 
    // You can pass any value to those promise functions from the Model controller and use it in the resolve/reject callbacks 
 
    modalInstance.result.then(function (selectedItem) { 
 
     // Get the selected template sent back from the modal ($uibModalInstance.close($scope.selectedTemplate);) 
 
     $scope.selected = selectedItem; 
 
    }, function() { 
 
     // The user clicked on the "cancel" button 
 
     $log.info('modal-component dismissed at: ' + new Date()); 
 
    }); 
 
    } 
 
    
 
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <script type="text/ng-template" id="modal.html"> 
 
     <div class="modal-header"> 
 
      <h3 class="modal-title">The modal!</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <select id="selectedTemplate" ng-model="selectedTemplate" ng-change="onSelectChangeTemplate_kind()"> 
 
       <option value="">Select Account</option> 
 
       <option ng-repeat="item in list_Template_kind" value="{{item.Templt_Kind_ID}}"> 
 
         {{item.Templt_Kind_ID}}-{{item.Templt_Kind_Name}} 
 
       </option> 
 
      </select> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
 
      <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
 
     </div> 
 
    </script> 
 
    
 
    <! -- Call "openModal" and pass "null" so no pre selection is displayed in the modal --> 
 
    <button ng-click="openModal(null)">Open</button> 
 
    <! -- Call "openModal" and pass "2" so "Template 2" will be preselected in the modal --> 
 
    <button ng-click="openModal('2')">Open (Preselect 2)</button> 
 
    <! -- Call "openModal" and pass the {{ selected }} property so the last template selected since you last closed the modal will be shown in the modal --> 
 
    <button ng-click="openModal(selected)">Open (Preselect last selected)</button> 
 

 
    <! -- Show the last selected template in the view (For debugging purposes) --> 
 
    <span ng-if="selected">{{ 'selected - ' + selected }}</span> 
 
</div>

來源

2017-04-12 15:22:29

我打算按angular-ui-bootstrap的問題，因爲在使用本地引導時它似乎有2 $的作用域級別。嘿，過了一天半，今天又是什麼？謝謝阿隆。 – JenniferWalters

你是什麼意思_press angular-ui-bootstrap_的問題？如果你能證明2級作用域的問題，那麼我可能會提供幫助，但正如你從我的答案中可以看到的那樣 - 使用本地解決方案可以讓你輕鬆實現你的需求，而無需處理內部作用域級別（嗯，至少在原始問題中提供的細節）。 –

2級作用域來自$ scope.Templt_Kind_ID = ddlID實際上不是= 34模式關閉後。 var ddlID = $ scope.selectedCountry; // <<包含正確的值 $ scope.Templt_Kind_ID = ddlID; // << $範圍。Templt_Kind_ID = 34，因爲它應該是 $ scope.Templt_Kind_ID不給我一個錯誤，它只是恢復到它的原始= -1。所以我說「2級範圍」，因爲它恢復到-1事件，但它在關閉時被設置爲34。 scope.Templt_Kind_ID = ddlID似乎正在其他地方。 – JenniferWalters

在模式引導彈出關閉後，AngularJS $ scope.variable不會更改

回答

相關問題