0

我正在开发一个使用 Angular.js 的项目，以及一个基于 jQuery 的自定义控件，该控件使用事件相关的数据触发事件；我希望能够在 Angular 中监听该事件（足够简单），然后显示一个对话框，其中包含一个绑定到该数据的模板，以便在对话框中更改值时，它们会自动反映在对象中与事件一起发送。

我不确定如何在 Angular 中执行此操作，如何按需呈现绑定到数据对象的模板。

例如; 控件使用被点击的可视对象的数据触发“点击”。我希望 Angular 监听，然后从文件（例如“menuDialog.html”）呈现模板的内容，以便我可以将其放置在我单击的屏幕上（我可以进行放置）。

我读过指令是要走的路，但这似乎是用于处理自定义 HTML 标记或属性。这同样适用于这里，我将如何以编程方式调用指令、数据绑定它并获取要放在页面上的内容？

我会确切地知道如何在 Backbone+Handlebars 中实现这一点，但我对 Angular 不太熟悉。

谢谢

4

2 回答 2

0

控制器：

.controller('MyCtrl', function($scope) {
  $scope.html = '<div>testing</div>'; // or use $http to fetch remotely
})

标记：

<div html-template="html"></div>

指令：

.directive('htmlTemplate', function($compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.click(function() {
        var html = scope.$eval(attrs.htmlTemplate);
        var newElement = $compile(html)(scope);
        <do stuff with newElement (it's a jQuery element)>
      });
    }
  }
})

请注意，html 中的任何指令都将在调用$compile.

于 2013-06-06T03:13:25.413 回答
0

根据我对问题的理解，这是您需要做的。

  1. 创建一个指令来处理自定义 jquery 控件引发的事件。Angular 本身支持事件指令，ng-click但我不确定它是否会在您的 jquery 控件生成自定义标记的情况下工作。

  2. 您的控制器应该包含一个属性（javasript 对象），其中包含您需要显示的弹出窗口的模型 + 一个布尔属性来表示何时显示模型

    $scope.popupModel=null; $scope.showPopup=假；

  3. 您应该使用 htmlng-include来包含您的模板 html。ng-include使用脚本标签支持来自服务器和客户端的模板。

  4. 模板 html 代码应该绑定到 property popupModel。

  5. 在指令定义中，使用对象哈希语法添加一个范围属性，该语法将两种方式绑定到控制器范围属性 popupModel 和 showPopup。就像是

    指令（'htmlTemplate'，函数（$compile）{

      return {
    restrict: 'A',
    scope:{model=@popupModel,show=@showPopup},
    link: function (scope, element, attrs) {
          element.click(function(e) {
               model=e.model;
               show-true;
          });
    }
})

  6. shopPopup只要为真，弹出窗口就会显示出来。这可以通过ng-show.

我建议您开始深入研究指令和ng-include.

于 2013-06-06T04:29:59.047 回答