Question

包含应用程序模块

app.js

var appProfileDetails = angular.module('profileDetailsApp', [
                                       'ngMaterial','ngAria','ngAnimate','ngRoute']);

它有控制器文件

contactController.js

appProfileDetails.controller('contactController', function($scope) {
    $scope.msg= function() {
        alert($scope.emailId);
    };
});

Html片段（ Contact.jsp ）

<div ng-app="profileDetailsApp">
      <div style="float: left;margin-left: 50px;width: 45%;" ng-controller="contactController" >
           <div ng-include="'/mm/resources/html/ContactDetails2.html'">
     </div>
</div>

此文件包含在上面的

ContactDetails2.html

<div>
    <input type="email" ng-model="emailId"/>
    <input type="button" ng-click="msg()"/>
</div>

Answer 1

它不起作用的原因是 ng-include 创建了一个新的子范围，从而打破了原型范围继承。

必须阅读才能更好地理解问题：

作为一个好的经验法则，请始终使用controller as语法。 Here这就是你应该使用它的原因。

Answer 2

尝试使用controllerAs语法。 ng-controller="contactController as contact"

然后在ContactDetails2模板中执行ng-model="contact.emailId"（并将ng-click值更改为contact.msg()。

如果您在contactController中将emailId实例化为''，它也会起作用。 $scope.emailId = ''。

让我用简单的术语解释这里发生的事情。

angular的范围问题是它使用了原型继承。 Angular将从上到下创建范围。

因此，它将首先创建您的控制器并为其创建新的范围。然后它遇到了ng-include，它遗憾地创建了一个新的继承范围。

这意味着它是一个新的范围对象，但原型（aka parent）设置为父范围。每当angular在ng的新范围中查找某些内容时，包括它将检查它是否存在于我的本地范围内，如果没有，它是否存在于父范围内，依此类推，直到它到达$ rootScope。

问题是ng-model检查本地范围是否存在emailId。它无法在本地范围内找到它。它看起来是父作用域，但它也找不到它。因此，它会创建 LOCALLY 。这就是为什么父作用域没有emailId存在的原因。

因此，要么保证它已经存在于控制器上（因为ng-model会立即对正确的变量起作用）或者使用控制器来解决问题。绝对建议使用controllerAs语法，因为它避免了所有类似的问题，而无需考虑它。

为什么控制器工作？因为当它为控制器创建范围时，它会在具有属性的新范围上执行此操作。在我的建议中，它将创建“联系”。现在，当ng-model在ng-include内运行时，它会检查“我有联系吗？”没有。但我的父母有。父母的联系人是否有电子邮件ID？不，好的。让我在那里创建它并在我的父范围内操作它。

如果您想避免角度问题1，请务必了解范围是如何工作的。我建议您遵循john papa's guide之类的样式指南。它还解释了为什么你应该遵循这些规则。

无法从$ scope获得价值

2 个答案: