Angularjs 模板：模型和函数停止在外部模板中工作？答案

【问题标题】：Angularjs templating: model and function stop working in external templates?Angularjs 模板：模型和函数停止在外部模板中工作？
【发布时间】：2013-12-26 05:09:56
【问题描述】：

在question 之后，我面临另一个挑战，$scope 内的模型和函数似乎停止工作了。下面是测试代码，添加按钮似乎不再收集我从<input type='text' ng-model='newPerson' />输入的任何数据了，

html,

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>AngularJS</title>
        <meta charset="utf-8">
        <script src="js/jquery-1.10.1.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="js/app.js" type="text/javascript"></script>
    </head>

    <body>

        <div ng-app='MyTutorialApp' ng-controller='MainController'>
            <div ng-include='thisIsAScopeProperty'></div>
        </div>

    </body>

</html>

外部模板，

<div id='content'>
    <input type='text' ng-model='searchText' />
    <ul>
        <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
    </ul>
    <input type='text' ng-model='newPerson' />
    <button ng-click='addNew()'>Add</button>

</div>

angularjs，

var app = angular.module('MyTutorialApp',[]);
app.controller("MainController", function($scope){

    $scope.thisIsAScopeProperty = 'template/index.html';
    $scope.people = [
        {
            id: 0,
            name: 'Leon',
            music: [
                'Rock',
                'Metal',
                'Dubstep',
                'Electro'
            ],
            live: true
        }
    ];
    $scope.newPerson = null;
    $scope.addNew = function() {
        alert(1); // works here when you click the Add button
        console.log($scope.newPerson); // but returns nothing when you type any text in the input
        if ($scope.newPerson != null && $scope.newPerson != "") {
            alert(2); // does not work here
            $scope.people.push({
                id: $scope.people.length,
                name: $scope.newPerson,
                live: true,
                music: [
                    'Pop',
                    'RnB',
                    'Hip Hop'
                ]
            });
        }
    }
});

任何想法为什么以及如何解决它？

【问题讨论】：

它在jsfiddle.net/52vVc工作
是的，但为什么不能在本地主机上工作？
不知道，但尽量简化。首先包括“包括”。也许没有错，但你永远不知道。
include "include" first. 抱歉，您是什么意思？如何include "include" first.？
调试它的第一步是去除不必要的代码。直到某些东西开始工作或所有的角度代码都消失了。然后添加一个 $scope 属性并从那里开始工作..

标签： javascript angularjs model-view-controller

【解决方案1】：

使用

<input type='text' ng-model='$parent.newPerson' />

ng-include 创建了一个新范围，因为 newPerson 是一个简单的属性，所以它在子范围和父范围上是不同的（即更改一个不会更改另一个）。因此，当包含的模板设置 newPerson 时，它在 mainController 的范围内仍然为 null。

要更好地了解作用域的工作原理，请阅读https://github.com/angular/angular.js/wiki/Understanding-Scopes

【讨论】：

@lauthiamkok 哦，伙计，我本可以这么快解决这个问题的。您的问题不清楚这是您的问题。你说$scope 不起作用，所以听起来好像根本没有数据绑定起作用。这只是子范围继承的问题。
是的，抱歉是 Angular 的新手，觉得它很吓人。