Question

我对ng-focus元素的ng-focus有疑问。我使用这部分代码

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

当我在template.tpl.html内置常规DOM元素时，

和ng焦点工作正常，如：

<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-focus不适用于ng-include中包含的ng-include？有关如何解决此问题的任何提示？

Answer 1

（现在您已经澄清了您的实际问题）作为评论的延续，ngInclude创建了所提供范围的子范围，在您的情况下，Ctrl子范围的子范围这无关紧要，因为整个包装器是Ctrl控制器。但是在这里，您需要在设置scope属性时要小心，并期望从孙子范围完成的更改将反映在其祖父范围内。您甚至没有在控制器中定义属性，即使您直接将它们定义为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上获得更好的解释。

ng-focus不适用于ng-include

1 个答案: