Question

我的指示：

ppm.directive('focusMe', function($timeout) {
return {
    link: function(scope, element, attrs) {
        scope.$watch(attrs.focusMe, function(value) {
            if(value === true) { 
                console.log('value=',value);
                //$timeout(function() {
                element[0].focus();
                scope[attrs.focusMe] = false;
                //});
            }
        });
    }
};
});

有时会调用该指令，有时则不会。它可以在同一个HTML文件中，其中一些元素可以具有标记，对于某些元素，该指令被调用，而对于其他元素则不是。

focus-me="true"

我甚至有两个不同的HTML文件具有相同的代码，但对于其中一个，从不调用该指令。例如，此代码可以在一个HTML文件中使用，而不在另一个HTML文件中。

<div class="row form-group">
<div class="col-xs-12" style="text-align:center;">
    <button class="btn btn-default" ng-click="addMore();" tabindex="5" focus-me="true">
        <span class="glyphicon glyphicon-plus button-add"></span>
        Add more
    </button>
</div>
</div>

可能导致这种情况的原因是什么？控制器是否对指令做了什么？

感觉很奇怪

Answer 1

您要在变量上添加$watch，除非您从指令内部更改变量。你有没有真实地传递给focus-me？如果没有，那么您可以取消手表，只需使用以下内容：

ppm.directive('focusMe', function($timeout) {
return {
    link: function(scope, element, attrs) {
        element.focus();
    }
};
});

<button focus-me>Some text</button>

Answer 2

好的，我解决了我的问题。没有调用该指令的元素实际上是在错误的时间/视图中调用的。因此，无论何时加载视图（元素所在的位置），都不会调用focus-me指令，因为它已在前一个视图中调用过。本质上，我必须将ng-show更改为ng-if。

此：

<div class="container-fluid">
<div dn-breadcrumbs dn-value="{{data.unitDn}}" ignore-levels="2" ng-show="currentStep > 0"></div>
<div ng-include="'templates/report/step1.html'" ng-controller="ReportStep1Controller" ng-show="currentStep == 0"></div>
<div ng-include="'templates/report/vri-step2.html'" ng-show="currentStep == 1"></div>
<div ng-include="'templates/report/vri-step3.html'" ng-show="currentStep == 2"></div>

对此：

<div class="container-fluid">
<div dn-breadcrumbs dn-value="{{data.unitDn}}" ignore-levels="2" ng-if="currentStep > 0"></div>
<div ng-include="'templates/report/step1.html'" ng-controller="ReportStep1Controller" ng-show="currentStep == 0"></div>
<div ng-include="'templates/report/vri-step2.html'" ng-if="currentStep == 1"></div>
<div ng-include="'templates/report/vri-step3.html'" ng-if="currentStep == 2"></div>

有时不会调用AngularJS指令

2 个答案: