2016-04-04 13 views
1

Açısal js malzeme tasarımının iletişim kutusuyla veri bağlama çalışıyorum. $scope.headerAçısal js malzeme desgininde veri bağlama mümkün değil

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

saçma mistake.Any yardım gerçekten kayda değer olacak varsa üzgünüm

bağlamak için Ama mümkün. Teşekkürler

cevap

2

Gerçekten de aptalca bir hataydı.

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

İÇİN:

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

yeteneğimi güvenen durdurmalısınız you.I ederiz

Değişim hattı ... Olur. – brk

+0

Yanıtı doğru olarak işaretlemekte fayda var mı? :) – Roy

+0

evet başka 2 dakika içinde kabul edemem – brk

İlgili konular