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

Question

我是Angularjs的新手，並嘗試在另一個指令中實現一個指令。 我有一個處理基本輸入事件的子指令basetext和處理與輸入相關的其他任務的myTextbox 。 我做了一個簡單的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");
            }
        }
    }
});

問題是basetext指令的blur事件和focus事件根本不起作用。 有什么建議可以解決這個問題嗎？ 謝謝

Answer 1

檢查元素，你會看到

basetext模板在輸入標記內，無效。

你需要在basetext指令上放置replace: true, property，然后它將替換子指令模板的元素。

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