把手到angularjs

Question

到目前为止,我一直在使用把手来制作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模板等等.我想摆脱它.

Answer 1

在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();
            });
         });

      }
   };
}]);