無法從$範圍獲得值

Question

包含應用模塊

1. 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-包括創建一個新的子範圍從而打破了原型範圍繼承。

• 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這樣的樣式指南。這也解釋了爲什麼你應該遵循這些規則。