Question

相当新的javascript。我想知道下面的标签，除了必须手动放入ID，有没有办法将.focus（）设置为容器（自定义指令）？

<tile class="ng-scope gridster-item" tilevalue="1" gridster-item="tile" row="0" col = "0" ng-repeat="tile in selectedTiles"> </tile>

Answer 1

是的，您可以创建自定义指令并在该元素上添加焦点事件。下面我创建了一个自定义指令“ 自定义焦点 ”，并在该指令上附加了焦点和模糊事件。

这是你的模板

<div ng-init="selectedTiles=[1,2,3,4,5]">
    <input type="text" custom-on-focus ng-repeat="tile in selectedTiles"/>
</div>

这是自定义指令代码

<script>
angular.module('demoApp')
    .directive('customOnFocus',[function(){
    return {
        restrict : 'A',
        link : function (scope,element,attrs) {

            var targetElem = element[0];

            targetElem.addEventListener("focus", focusHandler);

            targetElem.addEventListener("blur", blurHandler);

            function focusHandler(event) {
                // THINGS TO DO ON FOCUS
                // for example i am changing background color
                event.target.style.background = "pink";
            }

            function blurHandler(event) {
                //THINGS TO DO ON BLUR
                // reseting background color
                event.target.style.background = "white";
            }

            // Its very important to remove these events listener 
            // on scope destruction else it will cause memory leaks

            scope.$on('$destroy',function(){
                targetElem.removeEventListener('focus',focusHandler);
                targetElem.removeEventListener('blur',blurHandler);
            })

        }
    }
}]);

如何在不对ID进行硬编码的情况下获取角度自定义指令的焦点？

1 个答案: