0

私はAngularマテリアルを初めて使用します。私の問題は、ダイアログボックスを2回目に開いたときにスコープデータをバインドできないことです。

スコープ変数に割り当てられたデータベースからデータを取得し、md ダイアログ ボックスでスコープ var をバインドしました (最初の tym では問題なく機能します)。

以下は私のコードサンプルです

  var retrieveData = function(){
    var companyUrl =  dbUrl; 
     var request = {
         url:  companyUrl,
           type: "GET",

      };
    $http(request)
            .success(function (retrievedSource){

    // here I am assigning retrieved data to the scope variable 
                 $scope.retrievedSources = retrievedSource;

                }).error(function (){
                 console.log("search failed");
            });
 };



 <md-input-container class="md-icon-float md-block">
<label>Company Name  <span> * </span></label>
<input type="text" ng-required="true" style="width:100%;" name="companyName"  ng-pattern="namePattern" value='{{retrievedSources.companyName}}' />
<span id="companyNameErrorMessages" class="error"></span>

問題：

value='{{retrievedSources.companyName}}'

mdDialog cancel を使用してダイアログ ボックスをキャンセルすると、このスコープの割り当てが初めて適切に機能するようになりました スコープ データをバインドできません

$scope.updateCancel = function() {$mdDialog.cancel()};
4

1 に答える 1

1

で正しくバインドおよび更新する例を示したCodePenを作成しました。$scope.reterivedSourcesmd-dialog

NEW VALUE ボタンが更新されます$scope.reterivedSources.companyName。ダイアログを表示するようにコードをどのように設定したかはわかりませんが、コードでこれに注意してください。

scope: $scope,
preserveScope: true

JS

.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.retrievedSources = { companyName: 123 };

  $scope.showDialog = function(ev ,id) {
   $mdDialog.show({
     templateUrl: "test.html",
     parent: angular.element(document.body),
     clickOutsideToClose:true,
     targetEvent: ev,
     controller: materialEditCtrl,
     fullscreen: false,
     scope: $scope,
     preserveScope: true
   });
  };

  $scope.newValue = function () {
    $scope.retrievedSources.companyName = Math.random() * 1000;
  }
});

マークアップ

<div ng-controller="AppCtrl" ng-cloak="" class="buttondemoBasicUsage" ng-app="MyApp">
  <script type="text/ng-template" id="test.html">
    <md-dialog>
            <md-input-container class="md-icon-float md-block">
            <label>Company Name  <span> * </span></label>
            <input type="text" ng-required="true" style="width:100%;" name="companyName"  ng-pattern="namePattern" value='{{retrievedSources.companyName}}' />
            <span id="companyNameErrorMessages" class="error"></span>
    </md-dialog>
  </script>

  <md-button ng-click="showDialog($event)" class="md-raised md-primary">
    edit
  </md-button>
  <md-button ng-click="newValue()" class="md-raised md-primary">
    new value
  </md-button>
</div>
于 2016-07-12T12:21:50.583 に答える