輸入廣播ng-model畢竟沒有更新

我試圖解決一個謎題，爲什麼ng-model的輸入[radio]控件沒有像我期望的那樣設置。加載頁面後，所有的收音機都會正確啓動。點擊不同的控件改變radioVal變量 - 它的值在頁面中呈現。輸入廣播ng-model畢竟沒有更新

問題是，它看起來只發生在DOM中。當我調試代碼$scope.radioVal始終是相同的... modalDialog的隔離範圍不包含radioVal屬性。

在哪個範圍內創建無線電ng-model？它是不同的實例嗎？

工作代碼可以找到here on jsfiddle。

我的HTML代碼是：

<div ng-app = "app"> 
<div ng-controller="mainCtrl">   
    <a ng-click="showModalDlg()">Click me</a> 
    <br/><br/> 
    <modal-dialog show="showModal" action="actionFun">       
    <form> 
     <input type="radio" ng-model="radioVal" value="1">One<br/> 
     <input type="radio" ng-model="radioVal" value="nothing changes me">Two<br/> 
     <input type="radio" ng-model="radioVal" value="3">Three<br/> 
      <br/><br/> 
      The model changes in the DOM as expected: <b>radioVal = {{radioVal | json}}</b> 
      <br/> 
      but by pressing the Action button you can see that the model has not been modified. 
    </form>       
    <a class="button" action>Action</a>      
    </modal-dialog> 
    </div> 
</div>

我的角度代碼：

angular.module('common', []) 
    .controller('mainCtrl', ['$scope', function($scope){ 

     $scope.showModal = false; 
     $scope.radioVal = "nothing changes me"; 

     $scope.showModalDlg = function() { 
      $scope.showModal = !$scope.showModal; 
     }; 

     $scope.actionFun = function() { 
      console.log('actionFun ...' + $scope.radioVal); 
     };   

    }]).directive('modalDialog', 
     function() { 
      return { 
       restrict: 'E', 
       scope: { 
        show: '=', 
        action: '&', 
       }, 
       replace: true, 
       transclude: true, 
       link: function (scope, element, attrs) { 

         scope.hideModal = function() { 
          scope.show = false; 
          scope.$apply(); 
         }; 

         $('a[hide]', element).on('click', function(){ 
          scope.hideModal(); 
         }); 

         $('a[action]', element).on('click', function(){ 
          console.log('There is no radioVal in isolated scope either ... ' + scope.radioVal); 
          scope.action()(); 
          scope.hideModal(); 
         }); 
        }, 
      template: '<div class=\'ng-modal\' ng-show=\'show\'><div class=\'ng-modal-overlay\'></div><div class=\'ng-modal-dialog\' ng-style=\'dialogStyle\'><div class=\'ng-modal-dialog-content\' ng-transclude></div></div></div>' 
     } 
    }); 

    angular.module('app', ['common'])

來源

2014-07-16 gvlax

總是把一個點在ng-model

您正在試圖通過一個原始的嵌套的作用域這將打破2路捆綁。如果你傳遞一個對象但它將保持參照原始對象

簡單的改變：

$scope.radioVal = "nothing changes me";

要：

$scope.myModel={radioVal : "nothing changes me"};

並使用點在ng-model

<input ng-model="myModel.radioVal">

改變繼承並因此改變綁定。

DEMO

來源

2014-07-16 14:58:29 charlietfl

感謝charlietfl，你的推理使感官和作品。但是來自外部控制器mainCtrl的$ scope.showModal也是一個原語，雙向綁定在這裏仍然有效（參見：scope.hideModal = function（）{scope.show = false; ...在指令中。我仍然不明白 – gvlax

正確，但是正在傳遞給聲明與您的隔離範圍的雙向綁定的模態指令。內角是看你的。案件是不同的.. ng-model也是一個指令。在這裏可以看到所有帖子中的「use dot」。 – charlietfl

是的。我認爲「ng-model也是一個指令」是我錯過了解我的問題。我不會感到驚訝的是，如果我無法找到的右側radioVal（顯示在頁面中的值與其值相同）由其[NgModelController]管理（https://docs.angularjs.org/api/ng/type/ ngModel.NgModelController）不是我的控制器。 – gvlax

當你聲明你的指令中scope對象，這意味着你創建的每個孤立的範圍該指令的實例。您需要將radioVal傳遞到您使用指令創建的孤立（子）範圍。 HTML：

<modal-dialog show="showModal" action="actionFun" value="radioVal">

JS：

scope: { 
      show: '=', 
      action: '&', 
      radioVal: '=' 
     },

來源

2014-07-16 14:48:39 yarons

yarons，謝謝你的提示，但我寧願繼續由嵌入在模態對話框的內容控件使用的任何模型解耦我的「通用」模式對話框（見charlietfl響應）。 – gvlax

輸入廣播ng-model畢竟沒有更新

回答

相關問題