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

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时，它需要引用控制器中的作用域属性。

这是一个工作小提琴。

因此，您需要添加一个控制器：

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>

这是一个改编的工作小提琴，展示了这一点。