Невозможно получить доступ к модели $ scope

Question

В моем основном html у меня есть представление, которое загружает шаблоны.

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

Он загружает html всякий раз, когда нажимается ссылка.

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

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

}]); 

На этой странице (шаблон), у меня есть директива, которая загружает другой файл HTML

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

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


}); 

Затем я использую эту директиву на моей странице events.html с помощью <div data-ng-Post></div>

В почтовом ящике , У меня есть два поля ввода и кнопка

<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> 

При нажатии на кнопку тон, у меня есть некоторые операции, затем я пытаюсь очистить поля ввода, но я не могу. Метод здесь:

$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 =''; 


}; 

Очистка не происходит, я не знаю почему. Мой контроллер, который имеет этот метод Add, обертывает <div data-ng-view></div> в основной файл html, поэтому он является самым внешним контроллером и должен иметь доступ ко всем моделям $ scope внутри. Почему это не работает? Обратите внимание, что операции до расчистки работают без проблем

Answer 1

Ваш метод добавления находится в родительской области. Массив родителя не может видеть его детей, он работает наоборот. Свойства сообщения и имени пользователя определяются в дочерней области директивы. От ребенка вы можете ссылаться на родительские свойства, но не наоборот.

Если вы добавите объем: ложь и transclude лжи в вашу директиву, он не будет создавать свой собственный масштаб и вместо того, чтобы использовать сферу его родитель, так что ваша директива будет выглядеть примерно так:

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" 
      } 
     } 
    }) 

и вы можете получить доступ к элементам, что директива добавляет к объему от родителей, как это:

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

Обновление с помощью шаблона: {{имя пользователя}} в родителе. {{}} ctrl.hello

JavaScript:

функция myController ($ масштаб) { вар Ctrl = это; ctrl.hello = «Hello»

$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, 
    } 
})