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

您的两个控制器具有不同的$ scope值。由于编辑器位于EditingController $ scope内部，因此它将在较低范围而不是较高的WelcomeController $ scope中更改.name值。

尝试给自己一个父方法来修改值；

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

然后使用子代的新名称调用该方法。

Answer 2

始终使用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>

为什么我不能使用AngularJS从输入类型打印值？

2 个答案: