0

到目前为止，我一直在为 javascript 模板使用把手。但是我想使用angularJs。我想知道是否有人可以提出一个过渡到 angularjs 的好方法。例如，如果我有一个模态。我创建了一个车把模板，将其包含在我的页面底部，然后在 js func（rest api）中获取数据并告诉车把模板将编译后的文件放入 div 等。

这是一个示例 js 函数，它使用把手以模式显示事物。

$('[data-toggle="tabularmodal"]').click(function(e)
{
    e.preventDefault();
    var data_uri = $(this).attr('data-uri');
    var data_title = $(this).attr('data-header');
    var data;
    var source = $('#tabular-ep-data').html();
    var template = Handlebars.compile(source);
    $('.modal-header h3').html(data_title);
    $.getJSON(data_uri, function(json)
    {
        $('.modal-body').html(template(json));
    });
    $('#myModal').modal('show');
});

我想要一些关于以 angularjs 方式实现这一目标的建议。在车把中，我必须在页面底部包含 javascript 模板等。我想摆脱它。

4

1 回答 1

9

在 Angular 中，您可以创建一个指令，例如modal，它可以简单地放置在任何标签上，例如：

<button modal="path/to/partial">Open modal</div>

甚至

<modal template-url="path/to/partial">Open modal</modal>

如您所见，它非常灵活。深入理解指令需要一些时间，但一旦理解，它们就会非常强大。对于您想要操作 DOM 的所有内容，指令就是答案。

在指令中，您可以注入服务，这可以让生活更轻松。例如，$http可用于通过异步请求获取部分。另一个有用的服务是$compile，它准备模板，以便可以将其插入 DOM。

这是一个modal指令的示例（但可能性几乎是无穷无尽的）：

var app = angular.module('app', []);
app.directive('modal', ['$http', '$compile', function($http, $compile) {
   return {
      restrict: 'E',
      link: function(scope, elm, attrs) {
         element.on('click', function(e) {
            $http.get(attrs.templateUrl).success(function(template) {
               var html = $compile(template)(scope);

               // insert html somewhere
               scope.$apply();
            });
         });

      }
   };
}]);
于 2013-01-11T20:33:46.707 回答