2014-10-03 70 views
1

我對ng-include元素的ng-focus存在問題。我用這部分代碼ng-focus不適用於ng-include

<div ng-include="'template.tpl.html'" ng-controller="Ctrl" 
    ng-class="{'highlight':highlight==true,'nofocus':highlight==false}"></div> 

和NG重點工作正常,當我有template.tpl.html常規的DOM元素中,如:

<div class="form-group"> 
    <label class="control-label">My label</label> 
    <div class="input-wrap"> 
     <input type="text" name="Name" class="form-control" 
       ng-model="client.firstName" ng-disabled="displayMode != 'edit'" 
       ng-focus="highlight=true" ng-blur="highlight=false"> 
    </div> 
</div> 

,但是,如果我包括template.tpl另一個文件.html它不起作用了。例如,如果我申請在template.tpl.html像下面是行不通的結構:

<div ng-include="'contacts/contacts-list.tpl.html'"></div> 

爲什麼NG-焦點不會在工作NG-包括包含在NG-包括哪些內容?有關如何解決此問題的任何提示?

+2

適用於我http://plnkr.co/edit/bWYANdm8Rf9ohaGnBatT?p=preview – PSL 2014-10-03 15:14:03

+2

適用於我。也許你的模板正在從緩存中加載,你會得到一個過時的模板文件。在Chrome開發者模式下嘗試進行硬刷新以清除模板緩存。 – zszep 2014-10-03 15:29:35

+0

我想我沒有解釋得很清楚。這是plnkr,看看我指的是:http://plnkr.co/edit/iIxgAPmK7GZgZqD0dRYA?p=preview – bigcat 2014-10-03 16:30:14

回答

3

(現在您已澄清了您的實際問題)作爲評論的延續,ngInclude創建了所提供範圍的子範圍,在您的子範圍爲Ctrl的子範圍內,以及無關緊要,包裝是Ctrl控制器。但是,在設置範圍屬性時,您需要小心,並期望從孫範圍完成的更改反映在其祖父範圍內。您甚至沒有在控制器中定義屬性,即使直接將它們定義爲scope.highlight = false,對子對象或其子對象的屬性所做的更改也不會反映到父對象中(儘管它會作爲繼承的一部分傳播)。你應該記住範圍(隔離範圍除外)是原型繼承的,所以爲了解決這個問題,你可以使用一個包含需要修改的屬性的對象引用的屬性,這樣即使你改變屬性的值從孫子在該對象上它仍然會反映在訪問父相同的,因爲它們都在控制器上的同一個對象的引用看着屬性

所以初始化和對象: -

.controller('MainCtrl', function($scope) { 
    $scope.settings = {}; 
}); 

套裝在html中相應的綁定: -

<div ng-include="'tmpl.html'" ng-controller="MainCtrl" 
     ng-class="{'highlight':settings.highlight,'nofocus':settings.highlight}"></div> 

,並在其宏大的孩子還有: -

<input type="text" name="Name" class="form-control" 
    ng-model="client.firstName" 
    ng-focus="settings.highlight=true" ng-blur="settings.highlight=false"> 

Plnkr

你不會在angular scopes than this answer得到更好的解釋。

相關問題