Question

是否可以在自定义过滤器中插入指令？

例如，给出以下HTML：

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap-tpls.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello <span ng-bind-html="name | test"></span>!</p>
  </body>
</html>

和javascript：

var app = angular.module('plunker', ['ui.bootstrap']);

app.filter('test', ['$sce', function($sce){
  return function(val) {
    var out = '<b>' + val + '</b>';
    out += '<uib-progressbar value="55">55</uib-progressbar>';
    return $sce.trustAsHtml(out);
  }
}]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

如何让“uib-progressbar”正确显示为进度条？

根据我的阅读，我需要手动$编译指令，然后将结果元素追加到页面，但要做到这一点，其余的html（在过滤器中生成）将需要首先渲染，所以从我能看到的东西是不可能的？

我在这里设置了一个plunker：https://plnkr.co/edit/V5SmmQXPdrfKeVEbNwaV?p=preview

Answer 1

Filetrs不是为了这个，而是写指令，如：

jest.dontMock('../../components/list-conditions.js');

const React = require('react');
const TestUtils = require('react-addons-test-utils');

const ListConditions = require('../../components/list-conditions.js');

describe('ListConditions', () => {

  it('renders buttons', () => {
    var renderer = TestUtils.createRenderer();
    renderer.render(<ListConditions conditions={['a', 'b']} />);
  });

});

https://plnkr.co/edit/oQ0AekzCBjd9eiNqhL6c?p=preview

从自定义过滤器插入指令

1 个答案: