Question

如何在AngularJS中创建可重用的模型窗口？

我希望它可以重复使用，因为我们使用超链接触发模态窗口并根据传递的参数设置弹出内容。例如：

<div ng-controller="SampleCtrl">
    <a ng-click="toggleModal('FirstParam')">first</a>
    <a ng-click="toggleModal('SecondParam')">second</a>
    <a ng-click="toggleModal('ThirdParam')">Third</a>
</div>

当点击第一个链接时，它会显示一个包含与＆＃34; FirstParam＆＃34;等相关的内容的模式。

我已经尝试过自定义指令并使用$parent，但我不知道如何将toggleModal函数调用中的参数传递给自定义指令。

如何实现类似于this example的可重复使用的模态窗口？

特别是，我想知道：

如何将变量从控制器函数传递到自定义指令？
是否有关于可重用自定义指令和范围的好教程？
可重复使用的自定义指令是否还有其他设计模式？

Answer 1

Checkout http://egghead.io了解编写自定义指令的一些基础知识，指令和编译上的角度文档也包含所有细节https://docs.angularjs.org/guide/directive https://docs.angularjs.org/api/ng/service/ $ compile

这是一个plnkr，我发布了一个来自ui-bootstrap的popover的重写模板。根据您的确切用例，您可以通过覆盖模板或制作使用$ modal或其他模态UI控件http://plnkr.co/edit/eeiJ5re7mNdhHNDEeCQO?p=preview

的指令来逃避

// Code goes here

angular.module("myApp", ["ui.bootstrap", "ngSanitize"]).controller("TestCtrl", function($scope){


})

angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
        $templateCache.put("template/popover/popover.html",
            "<div class='popover {{placement}}' ng-class='{ in: isOpen(), fade: animation() }'>" + 
            "<div class='arrow'></div><div class='popover-inner'>" + 
            "<h3 class='popover-title' ng-bind='title' ng-show='title'></h3>" + 
            "<div class='popover-content' ng-bind-html='content'></div>" +
            "<button class='btn btn-cancel' ng-click='manualHide()'>Cancel</button>" +
            "<button class='btn btn-apply' ng-click='manualHide()'>Apply</button></div></div>");
    }]);

如何在角度JS中创建可重用的自定义指令

1 个答案: