Почему я не могу напечатать значение из типа ввода, используя AngularJS?

Question

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

app.js

'use strict';

angular
  .module('angularScopesBug', [])
  .controller("WelcomeController", function ($scope) {
    $scope.name = 'John Doe';

    $scope.getName = function() {
      return $scope.name;
    };
  })
  .controller("EditingController", function($scope) {
    $scope.editMode = false;
    $scope.changeName = function() {
      $scope.editMode = true;
    };
    $scope.closeEditor = function() {
      $scope.editMode = false;
    };
  })
  .directive("nameEditor", function () {
    return {
      template: 'Write your name: <input type="text" ng-model="name">'
    };
  });

index.html

<div ng-app="angularScopesBug" ng-controller="WelcomeController">
  <h1>Hello, {{ getName() }}</h1>
  <div ng-controller="EditingController">
    <button ng-click="changeName()" ng-show="!editMode">Change your name</button>

    <div ng-show="editMode">
      <name-editor ng-show="editMode"></name-editor>
      <button ng-click="closeEditor()" ng-show="editMode">Close name editor</button>
    </div>
  </div>
</div>

Заголовокдолжен меняться в зависимости от ввода.

Answer 1

Всегда используйте объект в ng-model.

Примитивы не имеют наследования, а вложенный контроллер использует дочернюю область.Когда эта дочерняя область создается, она получает примитив name в качестве значения.

Когда это объект, объект наследуется так, что обновленные значения свойств будут отражены во всех ссылках на этот объект

angular
  .module('angularScopesBug', [])
  .controller("WelcomeController", function($scope) {
    $scope.model = {
      name: 'John Doe'
    };      
  })
  .controller("EditingController", function($scope) {
     // simplified for clarity
  })
  .directive("nameEditor", function() {
    return {
      template: 'Write your name: <input type="text" ng-model="model.name">'
    };
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" ></script>


<div ng-app="angularScopesBug" ng-controller="WelcomeController">
  <h1>Hello, {{ model.name }}</h1>
  <div ng-controller="EditingController">
    <button ng-click="editMode = true" ng-show="!editMode">Change your name</button>

    <div ng-show="editMode">
      <name-editor ng-show="editMode"></name-editor>
      <button ng-click="editMode = false" ng-show="editMode">Close name editor</button>
    </div>
  </div>
</div>

Answer 2

Ваши два контроллера имеют разные значения $ scope.Поскольку редактор находится внутри области видимости $ EditingController, он меняет значение .name в нижней области видимости, а не в области более высокого уровня WelcomeController $.

Попробуйте использовать родительский метод для изменения значения;

$scope.changeName = function(str) {
    $scope.name = str;
};

И затем вызов этого метода с новым именем от дочернего.