2014-10-03 69 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得到更好的解释。

相关问题