Question

我在Ionic中玩游戏并希望在视图中插入自定义html，这也会有ng-if这样的指令吗？

示例：我想要一个服务，在app中的任何地方显示一个带有自定义文本的对话框窗口=它会在需要时将其注入视图中。

目前我在Ionic模板中的<div ng-bind-html="dialogWindow"></div>中有$rootScope.dialogWindow = '';因为这是一个抽象状态，控制器+视图随处可见。

然后我在主控制器中有这个 - angular.module('starter.services') .factory('$dialogs', ['$htmlInjector', function ($htmlInjector) { return { show: function (type) { if (type === 'type_a') { var template = '' + '<div class="overlay" ng-if="condition" ng-click="doSomething()"></div>' + '<div class="dialog">Test Controller</b>' + ''; $htmlInjector.add(template, 'dialog'); } } } }]);

服务

angular.module('starter.services')
.factory('$htmlInjector', ['$rootScope', function ($rootScope) {
    return {
        add: function (html, element) {

            if (element === 'dialog') {
                $rootScope.dialogWindow = html;
            }

        }
    }
}]);

然后

Expr1      ::= Number
     | String
     |  `true` 
     | `false` 
     | `undefined`            
     |  Expr1 `+` Expr1            
     |  Expr1 `-` Expr1            
     |  Expr1 `*` Expr1            
     |  Expr1 `%` Expr1            
     |  Expr1 `<` Expr1            
     |  Expr1 `===` Expr1            
     |  Ident AfterIdent            
     |  `[` Exprs `]`          
     |  `[` `for` `(` Ident `of` Expr `)` ArrayCompr Expr `]`            
     |  `(` Expr `)`

所以这个工作到目前为止，但是如果这个版本是正确的，那么模板就会被清理，因此没有可用的指令:(有什么更好的方法呢？我的想法是仅在需要时注入html节点并进入任何视图，而不仅仅是在主视图中（我这样做是因为我可以在任何屏幕页面上显示对话框。）

由于

Answer 1

我实际上和以前玩过的网站生成器有同样的问题。使用compile代替ng-bind-html。我发现这段代码可以解决问题：

angular.module('clientApp').config(function($compileProvider) {
    // configure new 'compile' directive by passing a directive
    // factory function. The factory function injects the '$compile'
    $compileProvider.directive('compile', function($compile) {
      // directive factory creates a link function
      return function(scope, element, attrs) {
        scope.$watch(
          function(scope) {
             // watch the 'compile' expression for changes
            return scope.$eval(attrs.compile);
          },
          function(value) {
            // when the 'compile' expression changes
            // assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current
            // scope.
            // NOTE: we only compile .childNodes so that
            // we don't get into infinite loop compiling ourselves
            $compile(element.contents())(scope);
          }
        );
      };
    });
  });

上面的代码添加了compile指令，可以在模板中使用ng-bind-html代替<div ng-bind-html="dialogWindow"></div>。

因此，您最终不会使用<div compile="dialogWindow"></div>来使用{{1}}

使用ng指令将HTML插入视图:: AngularJS + JavaScript + Ionic

1 个答案: