在Angularjs中的另一个指令模板中使用一个指令

时间:2015-11-02 03:49:49

标签: javascript angularjs angularjs-directive

我是Angularjs的新手,并尝试在另一个指令中实现一个指令。我有一个处理基本输入事件的子指令basetext和处理与输入相关的其他任务的myTextbox。我做了simple plunker 来证明我的问题。我已经实现了

html

<div my-textbox placeholder="'Input the value'" caption="Name:"></div>

myTextbox指令模板函数中:

template: function (elem, attrs) {
        return ("<label>" + attrs.caption + "</label>\
                 <input class='inputText' basetext='' " + "placeholder=" + attrs.placeholder +"/>");
},

和我的basetext指令:

app.directive("basetext", function () {
    return {
        restrict:'A',
        scope:{}
        template: "<input ng-focus='isFocus()' ng-blur='isBlur()'/>",
        link: function (scope, element, attrs) {

            scope.isBlur = function () {
                alert("is blurred");
            }
            scope.isFocus = function () {
                alert("is focused");
            }
        }
    }
});

问题是blur事件和focus指令basetext事件根本不起作用。有什么建议可以解决这个问题吗?谢谢

1 个答案:

答案 0 :(得分:1)

检查元素,你会看到

enter image description here

basetext的模板位于输入标记内,无效。

您需要将replace: true,属性放在basetext指令上,然后它将替换子指令模板的元素。

app.directive("basetext", function () {
    return {
        restrict:'A',
        replace: true,
        scope:{},
        template: "<input ng-focus='isFocus()' ng-blur='isBlur()'/>",
        link: function (scope, element, attrs) {

            scope.isBlur = function () {
                alert("is blurred");
            }
            scope.isFocus = function () {
                alert("is focused");
            }
        }
    }
});

这是DEMO