Question

我尝试使用angularjs自动填充对话框文本框。首先，我只想尝试一些数据绑定工作：

代码：

<div ng-app="">
        <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>
    </div>

$( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 250,
      width: 350,
      modal: true,
      buttons: {
            Ok: function() {
              $( this ).dialog( "close" );
            }
          }

    });


$( "#dialog-form" ).dialog( "open" );

但绑定无法正常工作。我是angualrjs初学者，我不知道什么是错误的，因为如果我不使用对话框，它会起作用。

更新：如果我删除Dialog代码，它按预期工作：

http://jsfiddle.net/WzEvs/280/

Answer 1

应该在Angular的框架中编写jQuery DOM操作，无论是在指令，动画还是使用angular.element（）。

以下是我将代码转换为指令的示例：

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


// JS
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");
                    }
                }
            });

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

http://jsfiddle.net/SirTophammHat/WzEvs/282/

在jQuery对话框中将jQuery UI元素与angularjs混合使用

1 个答案: