Question

我需要带有一些HTML的旋转木马。

工作流：

从远程服务器获取数据
将包含远程数据的HTML插入轮播
图像应根据尺寸进行缩放（这是指令）

controller.js

var = '<div scale-image>{{data}}</div>'// I have html template file, but this is example
var interpolator = $interpolate(template);
interpolator({data: data});

{{data}} ，但未初始化指令（无登录控制台）

directive.js

function scaleImage() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      console.log(element);
    }
  };
}

Answer 1

您可以通过在指令中注入$ compile来编译模板。已编译的模板可以替换为元素，也可以在该元素中追加。这是directive.js，其中的元素由编译的模板替换。

 function scaleImage($compile) {
      var template = '<div>{{data}}</div>';
      return {
        restrict: 'AE',
        scope: {
        data: data
        },
      link: function(scope,element,attr) {
                 var content = $compile(template)(scope);
                 element.replaceWith(content);
            }
      }
    }

并在您的html中，您可以将此指令用作

<div scale-image data="data"></div>

并在你的控制器中，

  $scope.data =  //response from server

如何使用指令编译模板？

1 个答案: