无法从$范围获得值

Question

包含应用模块

1. app.js

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

它具有控制器文件

1. contactController.js

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

2. 的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> 
   

该文件包括在上述片

1. ContactDetails2.html

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

开始=>

开始=>

Answer 1

之所以不起作用是NG-包括创建一个新的子范围从而打破了原型范围继承。

• Angularjs ng-model doesn't work inside ng-if：

  必须为了更好地理解这个问题读取。

• What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

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

Answer 2

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

然后在ContactDetails2模板做ng-model="contact.emailId"（以及ng-click值更改为contact.msg()。

它也会，如果你实例化EMAILID为“”中的ContactController。$scope.emailId = ''工作。

让我在这里简单地解释一下这里发生了什么

角度范围的问题在于它使用原型继承，角度将创建从上到下的范围

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

这意味着它是一个新的作用域对象，但原型（又名父级）设置为父级作用域。每当角度在ng-include的新范围内查找某些内容时，它会检查它是否存在于我的本地范围中，如果不存在，它是否存在于父范围内，依此类推，直到达到$ rootScope。

问题是ng-model检查emailId是否存在于本地作用域中。它无法在本地范围内找到它。它看起来是父范围，但它也无法在那里找到它。因此它会创建它当地。这就是为什么父作用域没有emailId存在的原因。因此，要么保证它已经存在于控制器上（因为那么ng-model将立即在正确的变量上工作），要么使用控制器来修复问题。使用controllerAs语法是绝对推荐的，因为它避免了所有类似的问题，而无需考虑它。

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

当然，如果你想避免角度1的问题，肯定会了解示波器的工作原理。我建议遵循像john papa's guide这样的样式指南。这也解释了为什么你应该遵循这些规则。