Question

在这个小提琴http://jsfiddle.net/WzEvs/286/中，我更新了一些代码，以便在单击按钮时显示对话框。但是没有显示对话框。我是否需要以不同的方式调用模块？

小提琴代码：

<div ng-app="app" dialog-form=""></div>


<button id="btnSave">Save Click</button>

angular.module("app", []);

  $(document).ready(function () {

        $("#btnSave").click(
            function () {
                showit();
            }            
        );
    });

function showit(){

    alert('here')

angular.module("app")
    .directive("dialogForm", function () {


    return {
        restrict: "A",
        template: "<div id='dialog-form'><label for='name'>Name</label> <input type='text' name='name' id='name' ng-model='data.message'><h1>{{data.message}}</h1></div>",
        controller: function ($scope, $element) {
            $scope.data = {};
            $scope.data.message = "";
        },
        link: function (scope, element, attrs) {
            element.dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    Ok: function () {
                        element.dialog("close");
                    }
                }
            });

            element.dialog("open");
        }
    };
});
}

更新：

以下是我尝试将其显示为ng-click但没有被触发的内容：

http://jsfiddle.net/WzEvs/300/

代码：

<table>
    <tr ng-controller="MyController" ng-click="showit()">Click</tr>
</table>

function MyController($scope) {

$scope.showit() = function() {

    alert('here')

angular.module("app")
    .directive("dialogForm", function () {


    return {
        restrict: "A",
        template: "<div id='dialog-form'><label for='name'>Name</label> <input type='text' name='name' id='name' ng-model='data.message'><h1>{{data.message}}</h1></div>",
        controller: function ($scope, $element) {
            $scope.data = {};
            $scope.data.message = "";
        },
        link: function (scope, element, attrs) {
            element.dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    Ok: function () {
                        element.dialog("close");
                    }
                }
            });

            element.dialog("open");
        }
    };
});
};

应显示什么：ok警告框“此处”。在上面的代码中单击“确定”一个新的Dialog（称为dialogForm）。

显示的内容：ok alter box“here”。单击“确定”时，ok框会消失，但上面代码中的新对话框（称为dialogForm）不会显示。

更新：

接受答案代码：

html：

<div ng-app="app">
    <div dialog-form=""></div>
    <button id="btnSave">Save Click</button>
</div>

javascript：

angular.module("app", []);

angular.module("app")
.directive("dialogForm", function() {
    return {
        restrict: "A",
        template: "<div id='dialog-form'><label for='name'>Name</label> <input type='text' name='name' id='name' ng-model='data.message'><h1>{{data.message}}</h1></div>",
        controller: function ($scope, $element) {
            $scope.data = {};
            $scope.data.message = "";
        },
        link: function (scope, element, attrs) {
            element.dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    Ok: function () {
                        element.dialog("close");
                    }
                }
            });

                        angular.element("#btnSave").on("click", function () {
                element.dialog("open");
            });
        }
    };

});

Answer 1

您可以通过选择按钮来触发对话框打开来修改指令链接功能：

<div ng-app="app">
    <div dialog-form=""></div>
    <button id="btnSave">Save Click</button>
</div>

angular.module("app")
.directive("dialogForm", function () {

return {
    restrict: "A",
    template: "<div id='dialog-form'><label for='name'>Name</label> <input type='text' name='name' id='name' ng-model='data.message'><h1>{{data.message}}</h1></div>",
    controller: function ($scope, $element) {
        $scope.data = {};
        $scope.data.message = "";
    },
    link: function (scope, element, attrs) {
        element.dialog({
            autoOpen: false,
            height: 250,
            width: 350,
            modal: true,
            buttons: {
                Ok: function () {
                    element.dialog("close");
                }
            }
        });

        // From the dialog-form element, find the "#btnSave" sibling element.
        // bind the dialog open function to a click event on that element.

        element.siblings("#btnSave").on("click", function() {
            element.dialog("open");
        });
    }
};

});

您可以选择在指令的链接功能中使用angular.element（），以避免担心按钮的位置（无论如何，id选择器都是最快的）。

angular.element("#btnSave").on("click", function(){ element.dialog("open"); });

在onClick中显示一个对话框

1 个答案: