Question

我有使用'box1'指令创建div的角度代码。在那个盒子里面有一个按钮。单击该按钮时，我希望它调用另一个名为“box2”的指令。这个box2将进入box1。我该怎么做？

HTML：

<div ng-app="myApp">
     <div>
         <box1>
         </box1>
     </div>
</div>

ANGULAR：

var app = angular.module("myApp", []);

app.directive("box1", function () {
    return {
        restrict: "E",
        template: '<div id="group_1">Content from the first box! <button>Create 2nd Box</button></div>'
    }
});

app.directive("box2", function () {
    return {
        restrict: "E",
        template: '<div id="group_1_1"> Content from second box! </div>',
    }
});

在Angular中使第一个框中的按钮调用box2指令的正确方法是什么。此外，我不能只在box1指令模板内写，因为它只会自动生成box2。我不希望这样。我希望他们点击box1的按钮进入box2。

如果有兴趣，请链接到JsFiddle。 http://jsfiddle.net/RZSKe/

Answer 1

不确定我是否理解正确，但您似乎应该使用$compile服务。这是我的意思的种子 - 它应该可能适合您的需求：

var app = angular.module("myApp", []);

app.directive("box1", function ($compile) {
    return {
        restrict: "E",
        template: '<div id="group_1">Content from the first box! <button ng-click="createBox2()">Create 2nd Box</button></div>',
        link: function (scope, el) {
            scope.createBox2 = function () {
                var box2 = $compile("<box2></box2>")(scope);
                el.append(box2);
            }
        }
    }
});

app.directive("box2", function () {
    return {
        restrict: "E",
        template: '<div id="group_1_1"> Content from second box! </div>',
    }
});

---DEMO---

使用按钮调用另一个指令内的指令？

1 个答案: