Question

如何在我的指令中解析/编译/解析包含的html的内容。

有问题的指令是：

angular.module('transclude', [])
 .directive('heading', function(){
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
        scope: {
            cls: '@'
        },
      template: '<h1 ng-transclude></h1>'
    };
});

和它伴随的html：

<div ng-app="transclude">
  <div ng-controller="Ctrl">
      <heading cls="beans">
          <span class="{{cls}}">{{cls}}</span>
      </heading>
  </div>
</div>

我已经创建了以下非常简化的plunker来演示我的问题：http://jsfiddle.net/ys9fekss/

正如您所看到的，我希望我的指令中包含的html在属性上包含{{cls}}标记，并且包含的html将替换为文字字符串＆＃39; beans＆＃39 ;

我一整天都在苦苦挣扎 - 我已经看过范围界定，编译，链接功能了 - 你说出来了，但没有用。

我尝试做的是创建一个可以包装任何类型字段的验证器指令。

我需要做些什么才能获得角度来解析该字段的HTML？

更新：由于我还在努力解决这个问题，我已经发布了我的实际HTML（针对下面给出的解决方案进行了修改），显示了共享范围的问题：

http://jsfiddle.net/hwsqsxf3/

在上面的例子中，设置范围：true会停止重复的值，但会停止名称=＆＃34;＆＃34;属性被解析！

我需要的是这两件事......一次！

Answer 1

也许你需要的是一个不同的方法，一个具有共享范围的指令（不像你的那样孤立），但能够为范围创建新的值，这样你就可以在应用程序中多次使用该指令但具有不同的每一个中的值：

<div ng-app="transclude">
  <div ng-controller="Ctrl">
      <heading cls="beans" target="tar">
          <span class="{{tar}}">{{tar}}</span>
      </heading>
  </div>
</div>

// target属性将是你的范围值（不需要在控制器中声明）

function Ctrl($scope) {
  $scope.foo = 'Bar';
}

angular.module('transclude', [])
 .directive('heading', function(){
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<h1 ng-transclude></h1>',
        link: function(scope, el, attr){
            scope[attr.target] = attr.cls;
        }
    };
});

检查此fiddle

Answer 2

我认为我已经解决了我自己的问题 - 在Strife86和This blog

的帮助下

我的解决方案就在这里。它不是很优雅 - 不确定这是指令工作方式的错误还是我的错。如果有一种更优雅的方式，我很乐意听到它。

JsFiddle

该指令的代码基本上是：

.directive('validatingField', ['$compile', function($compile) {
    return {
        restrict: 'EA',
        transclude: true,
        scope: {
            label: '@',
            field: '@',
            labelWidth: '@',
            fieldWidth: '@',
            error: '=',
            ngModel: '='
        },
        templateUrl: "validating-field.html",
        link: function (scope, element, attrs, ctrl, transcludeFn) {

          transcludeFn(scope, function(clone, scp) {
            element.find('ng-transclude').replaceWith(clone);
          });

        }
    };
}]);

绑定ngModel是最困难的事情，我不喜欢不断重复元素，但是现在我已经烧了1.5天才能到达这里，所以我真的没心情进行实验！

Answer 3

好吧，这似乎是修复，虽然它有点不优雅：

http://jsfiddle.net/ywksgocm/

这包括模型的双向绑定，以及继承和扩充的父作用域（用于监视控制器作用域访问）。

关键是：

myScope.$new();

如果有任何改善方法，请告诉我。

如何在angularjs指令中解析/编译/解析包含的html的内容

3 个答案: