如何从指令中的参数中提取角度原始代码并进行渲染

Question

不确定，如何更多地描述这个问题。所以有简单的代码和jsfiddle

HTML

<div>
  <span format="the value is: {{value||'no-val'}}" value="100" my-test></span>
</div>

和javascript

App.directive('myTest', function() {
  return {
      restrict: 'A',
      replace: true,
      scope: {
          format: '@'
      },
      template: "<span>{{format}}</span>",
      link: function($scope, element, attrs) {
          $scope.value = attrs.value
     }
  }
})

http://jsfiddle.net/VhvEy/2

我的期望<span>the value is: 100</span>

现实<span>the value is: no-val</span>

感谢您的解释！

Answer 1

在插入value时，需要引用控制器中的作用域属性。

这是working fiddle。

所以，你需要添加一个控制器：

App.controller('Ctrl', function($scope) {

    $scope.value = 100;
})

并使用ng-controller：

连接控制器

<div ng-controller="Ctrl">

value上的<span>属性不会自动绑定到角度范围。

修改

如果你真的想在指令中插入模板，你可以覆盖指令中的compile函数：

App.directive('myTest', function($compile) {
    return {
        restrict: 'A',
        scope: {
            value: '@'
        },
        compile:function(element, attrs) {

            var strTemplate = "<span>{{" + attrs.format +"}}</span>";
            element.replaceWith(strTemplate);
        }
    }
})

要做到这一点，不要在html中进行插值，只需在指令中发送要插入的文本：

<span format="value || 'no-val'" value="100" my-test></span>

以下是显示此内容的adapted working fiddle。