Question

我正在尝试构建动态HTML字符串，其中包含一个对范围变量中的更改做出反应的指令。如果我静态地构建字符串，那么我的$watch可以正常工作，但如果字符串是动态的，则$watch永远不会触发。

我确信答案在于使用$compile的某个地方，我已经研究了很多例子，但我似乎无法让它们满足我的特定需求。

这可能吗？

我的plunkr，用于演示带有上标标记的句子。

的index.html

<body ng-controller="MainCtrl">
    <h3>Static Example</h3>
    <div>Humpty Dumpty sat<ref><sup>1</sup></ref> on a wall.</div>
    <div>Humpty Dumpty had a great<ref><sup>2</sup></ref> fall.</div>

    <h3>Dynamic Example</h3>
    <div ng-repeat="item in dynamic">
      <span ng-bind-html="item | to_trusted"></span>
    </div>
    <br>
    <input type="checkbox" ng-click="sup = !sup"> hide/show
</body>

app.js

var app = angular.module('app', [])
  .filter('to_trusted', ['$sce', function($sce) {
    return function(text) {
      return $sce.trustAsHtml(text);
    };
}]);

app.controller('MainCtrl', function($scope) {
  $scope.sup = true;
  $scope.dynamic = ["Humpty Dumpty sat on a wall.<ref><sup>1</sup></ref>", 
                    "Humpty Dumpty had a great fall.<ref><sup>2</sup></ref>"];
});

app.directive('sup', function($compile) {
  return {
    restrict: 'E',
    link: function(scope, element) {
      scope.$watch('sup', function() {
        element.css({ display: scope.sup ? 'inline' : 'none' });
      });
    }
}});

Answer 1

你必须改变你的指令，如下所示。

app.directive('compile', ['$compile', function ($compile) {
    return function (scope, element, attrs) {
        scope.$watch(
      function (scope) {
          return scope.$eval(attrs.compile);
      },
      function (value) {
          element.html(value);
          $compile(element.contents())(scope);
      }
    );
    };
}]);

然后在html中使用它。

<h3>Dynamic Example</h3>
<div ng-repeat="item in dynamic">
  <span compile="item"></span>
</div>

Demo code

AngularJS：在动态HTML中使用指令

1 个答案: