Formularz dostępu z poziomu Angular $ mdDialog

Question

Używam materiału Angular 1.5 Material Design $mdDialog w zalecany sposób, używając controllerAs: "dialog". W szablonie mam formularz: <form name="fooForm". W szablonie mogę uzyskać dostęp do formularza bez problemu, np. ng-disabled="fooForm.$invalid || fooForm.$submitted".

Ale jak uzyskać dostęp do tego formularza z poziomu kontrolera $mdDialog? Z tego co czytałem, to spodziewam się, aby móc to zrobić:

const doFoo =() => { 
     if (this.fooForm.$dirty) { 

Tutaj this jest kontrolerem dialogowe.

Ale pojawia się błąd: TypeError: Cannot read property '$dirty' of undefined. I oczywiście, jeśli wstawię punkt przerwania w kodzie, kontroler nie ma właściwości fooForm.

Próbowałem również użyć $scope, ale kiedy wstawię punkt przerwania w kodzie $scope nie ma również właściwości fooForm.

Oto mój szablon dialogowe:

<md-dialog aria-label="FooBar"> 
    <md-toolbar> 
    <div class="md-toolbar-tools"> 
     <h2>FooBar</h2> 
     <span flex></span> 
     <md-button class="md-icon-button" ng-click="dialog.cancel()"> 
     <md-icon>close</md-icon> 
     </md-button> 
    </div> 
    </md-toolbar> 
    <form name="fooForm" ng-submit="dialog.ok()" novalidate> 
    <md-dialog-content> 
     <div layout="column" layout-padding> 
     <h2 class="md-headline">Foo</h2> 
     <div layout="row" layout-xs="column"> 
      ... 
     </div> 
    </md-dialog-content> 
    <md-dialog-actions> 
     <md-button class="md-primary" type="submit" ng-disabled="fooForm.$invalid || fooForm.$submitted"> 
     OK 
     </md-button> 
     <md-button ng-click="dialog.cancel()"> 
     Cancel 
     </md-button> 
    </md-dialog-actions> 
    </form> 
</md-dialog> 

Jak mogę uzyskać dostęp do formularza w $mdDialog ze sterownika dialogowym?

Answer 1

trzeba przypisać formularz do zakresu kontrolera. Zrób to, zmieniając nazwę formularza z fooForm na dialog.fooForm.

<form name="dialog.fooForm" ng-submit="dialog.ok()" novalidate> 

Answer 2

1. Zakres istniał i nadal istnieje, pomijając kontroler. Kiedy używasz 'controllerAs xxx', które właśnie znaczą - umieść mój kontroler w zasięgu i nazwij go xxx. Można ich używać razem:

function controller($scope) { 
    var vm = this; 

    vm.click = function() {} 

    $scope.click = function() {} 
} 

<button ng-click="xxx.click()" ... 
<button ng-click="click()" ... 

2. Teraz jeśli piszesz ng-click="whatever();smth();" kątowe użyje $parse(expression)(scope) do analizowania tego wyrażenia.

3. Teraz piszesz form name="formName" - kątowy użyje $parse("formName").assign(scope, form); i umieści go w zasięgu.

4. $ parse jest dość sprytny i łatwo obsługiwać właściwości zagnieżdżonych, aby umieścić formularz na kontrolerze (jak XXX): <form name="xxx.myForm"></form>

Answer 3

Formularz nie jest zdefiniowana w kontrolerze jako własność i dlatego nie ma dostępu do formularza, takiego jak if (this.fooForm.$dirty).

Jednak można łatwo przekazać ją do metody:

const doFoo = (fooForm) => { 
    if (fooForm.$dirty) { 
    ... 

A w html:

ng-click="dialog.cancel(fooForm)" 

Answer 4

Podaj nazwę kontrolera podczas inicjowania $mdDialog.patrz poniżej kod:

$scope.showDialog = function (ev) { 

    $mdDialog.show({ 
     controller: 'myController', 
     templateUrl: 'template.html', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     clickOutsideToClose: false, 
     fullscreen: false // Only for -xs, -sm breakpoints. 
    }) 
     .then(function (answer) { 
      $scope.status = 'You said the information was "' + answer + '".'; 
     }, function() { 
      $scope.status = 'You cancelled the dialog.'; 
     }); 
}; 

Upewnij się, że wpisujesz nazwę kontrolera w cudzysłów, gdy tworzysz oddzielny kontroler. jak controller: 'myController'

jeśli chcesz przekazać funkcję to nie cytaty potrzebne jak controller: myController,

w html szablonu użytku ng-submit="ok()" zamiast ng-submit="dialog.ok()".

Utworzono próbkę plnkr z Twoim szablonem i działa poprawnie. sprawdzić here

EDIT: `

angular.module('BlankApp', ['ngMaterial']).controller('myController', function($scope, $mdDialog) { 
     $scope.ok = function() { 
      if ($scope.fooForm.$dirty) { 
       // do whatever you want 
       $mdDialog.hide("mesage");  
      } 
     }; 
});`