Question

我正在创建一个简单的角度指令供参考。当我将它添加到HTML页面时，它工作正常但是当我通过HTML标签字符串添加它并使用ng-bind-html解析时，它无法正常工作。请提出一些建议。

指令：

@Override
public void onBindViewHolder(BlogViewHolder holder, int position) {
        //Set the OnClickListener on whatever view you want to trigger when clicked.
        holder.mView.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {
            //You can get the context from the view itself.
            Intent intent = new Intent(view.getContext(), theOtherActivityName.class);
            //Put your intent extras.
            intent.putExtra("blog_id",post_title.getText().toString());
            view.getContext().startActivity(intent);
        }
    });

}

Plunker

Answer 1

您需要调用compile指令来实现此功能

JS代码

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

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

    app.controller("MessageCtrl", function($scope) {
    $scope.message = "Product created!";
     $scope.htmlContent = '<notification message="{{message}}"></notification>';

})
app.directive("notification", function() {
    return {
        restrict: 'E',
        scope: {
            message: '@'
        },
        template: '<div class="alert">{{message}}</div>'
    }
});

app.directive('compile', ['$compile', function ($compile) {
      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);
            }
        );
    };
}]);

HTML代码

<div ng-controller="MessageCtrl">
   <div compile="htmlContent"></div>
   <notification message="{{message}}"></notification>
</div>

检查Plunker

您可以在this answer

中详细了解相关信息

如果使用html字符串传递并使用ng-bind-html解析，则Angular指令不起作用

1 个答案: