无法从$scope获取值

Unable to get value from $scope

本文关键字：获取 scope      更新时间：2023-09-26

包含应用程序模块

  1. 应用.js 

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

它有控制器文件

  1. 联系人控制器.js 

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

  2. 网页条（联系方式.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. 联系方式2.html 

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

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

为了更好地理解这个问题，必须阅读：

  • Angularjs ng-model 在 ng-if 中不起作用。
  • AngularJS中范围原型/原型遗传的细微差别是什么？

作为一个好的经验法则，始终使用控制器作为语法。这就是您应该使用它的原因。

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

然后在联系人详细信息2模板中执行ng-model="contact.emailId"（并将ng-click值更改为contact.msg()。

如果您在联系人控制器中将电子邮件 ID 实例化为"，它也将起作用。 $scope.emailId = '' .

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

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

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

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

问题是ng-model检查本地范围内是否存在emailId。它在本地范围内找不到它。它查找父范围，但在那里也找不到它。因此，它将在本地创建它。这就是父范围没有电子邮件 ID 的原因。

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

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

如果你想避免角度 1 的问题，一定要了解范围是如何工作的。我建议遵循像约翰爸爸的指南这样的风格指南。它还解释了为什么您应该遵循这些规则。

相关文章：