Zugriff auf $ Scope-Modell

Question

In meinem Haupt-HTML habe ich eine Ansicht, die Vorlagen lädt.

<div data-ng-view></div> 

Es lädt ein HTML, wenn der Link geklickt wird.

app.config(["$routeProvider", function ($routeProvider) { 
'use strict'; 

$routeProvider 
    .when("/", { 
     templateUrl: "events.html"  
    }); 

}]); 

Auf dieser Seite (Vorlage), ich habe eine Richtlinie, die eine andere HTML-Datei lädt

app.directive('ngPost', function() { 
'use strict'; 

return { 
    restrict: 'A', 
    templateUrl: 'postbox.html' 
}; 


}); 

ich diese Richtlinie dann auf meine events.html Webseite von <div data-ng-Post></div>

In Postbox , Ich habe zwei Eingabefelder und eine Schaltfläche

<input type="text" id="user" data-ng-model="username" /> 
<input type="text" id="mess" data-ng-model="message"/> 
<button data-ng-click="Add(eventid-1, username, message)">Post</button> 

Nach dem Klicken auf, aber Ich habe einige Operationen, dann versuche ich die Eingabefelder zu löschen, aber ich kann nicht. Methode hier:

$scope.Add = function (index, uname, msg) { 

    var a = {user: uname, message: msg, time: new Date()}; 

    $scope.data[index].messages.push(a); 

    $scope.message = ''; // clearing here 
    $scope.username =''; 


}; 

Die Klärung passiert nicht, ich weiß nicht warum. Mein Controller, der über diese Add-Methode verfügt, umschließt die <div data-ng-view></div> in der Haupt-HTML-Datei, so dass es der äußerste Controller ist und Zugriff auf alle $ Scope-Modelle haben sollte. Warum funktioniert es nicht? Beachten Sie, dass die Vorgänge vor dem Löschen ohne Probleme ausgeführt werden

Answer 1

Ihre Add-Methode befindet sich im übergeordneten Bereich. Der Umfang der Eltern kann nicht sehen, dass es Kinder sind, es funktioniert umgekehrt. Die Nachrichten- und Benutzernameneigenschaften sind im untergeordneten Bereich der Richtlinie definiert. Von einem Kind können Sie auf Elterneigenschaften verweisen, aber nicht umgekehrt.

Wenn Sie Rahmen hinzufügen: false und transcluden: false zu Ihrer Richtlinie, wird es nicht schaffen einen eigenen Anwendungsbereich ist und statt dessen Eltern Bereich verwenden, so würde Ihre Richtlinie wie folgt aussehen:

angular.module('app', []).controller("myController",myController); 

    function myController($scope){ 
     var ctrl = this; 
     ctrl.hello ="Hello" 

    }; 

    angular.module('app').directive("childThing", function() { 
     return { 
      template: '<div>{{message}}</div><div>{{username}}</div>', 
      scope: false, 
      transclude: false, 
      controller: function($scope) { 
       $scope.username="Mike Feltman" 
       $scope.message="Hi Mike" 
      } 
     } 
    }) 

und Sie können die Elemente zuzugreifen, dass die Richtlinie von der Mutter wie dies auf den Umfang ergänzt:

<div ng-controller="myController as ctrl"> 
     {{username}} in the parent. 
     <div>{{ctrl.hello}}</div> 
     <child-thing></child-thing> 
    </div> 

Aktualisieren Sie Ihre Vorlage: {{username}} in den Eltern. {{}} ctrl.hello

Javascript:

Funktion MyController ($ scope) {var ctrl = this; ctrl.hello = „Hallo“

$scope.add = function() { 
     alert($scope.username) 
    } 

}; 

angular.module('app').directive("childThing", function() { 
    return { 
     template: '<input type="text" id="user" data-ng-model="username" /><input type="text" id="mess" data-ng-model="message"/>', 
     scope: false, 
     transclude: false, 
    } 
})