1

我正在尝试将数据与角度 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);
  };
}

代码笔

如果有一个愚蠢的错误，我很抱歉。任何帮助都将是非常可观的。谢谢

4

1 回答 1

2

这确实是一个愚蠢的错误。发生...

换行：

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

至：

<h2 ng-model="header">{{header}}</h2>
于 2016-04-04T13:35:49.253 回答