Question

我正在尝试使用角度js材料设计的对话框绑定数据。但无法绑定$scope.header

HTML

    <div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
      <p class="inset">
        Open a dialog over the app's content. Press escape or click outside to close the dialog and
        send focus back to the triggering button.
      </p>

      <div class="dialog-demo-content" layout="row" ayout="row" layout-wrap="" layout-margin="" layout-align="center">

        <md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
          Custom Dialog
        </md-button>

      </div>


    <script type="text/ng-template" id="dialog1.tmpl.html">

<md-dialog aria-label="Mango (Fruit)"  ng-cloak>
      <form>
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2 ng-model="header">{{$scope.header}}</h2>   // Trying to bind data here
            <span flex></span>
          </div>
        </md-toolbar>

        <md-dialog-content>
          <div class="md-dialog-content">
            All contents
          </div>
        </md-dialog-content>

        <md-dialog-actions layout="row">
          buttons
        </md-dialog-actions>
      </form>
    </md-dialog>
    </script>
      </div>

JS

 angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
  $scope.status = '  ';
  $scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');


$scope.showAdvanced = function(ev) {
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen;

    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'dialog1.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true,
      fullscreen: useFullScreen
    })
 };


});

function DialogController($scope, $mdDialog) {
  $scope.header="Mango";

  $scope.hide = function() {
    $mdDialog.hide();
  };

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

  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}

CODE PEN

如果有一个愚蠢的错误，我很抱歉。任何帮助都会非常明显。感谢

Answer 1

这确实是一个愚蠢的错误。反应...

更改行：

<h2 ng-model="header">{{$scope.header}}</h2>

TO：

<h2 ng-model="header">{{header}}</h2>

无法绑定角度js材质设计中的数据

1 个答案: