Question

我有以下情况。我创建了angularjs指令，它在angularjs世界里很有效。但我需要从生成角度以外的代码中获取该指令的编译版本。从angularjs的角度来看，我知道这样做的丑陋方式，但是现在我有js库，只接受html，并对其进行一些转换，并返回我需要的html。那个js库对Angular一无所知，只适用于html。出于演示目的，我创建了简单的指令，简单的控制器和简单的页面。你可以在plunker here上看到它。应编辑指令，例如在按钮点击后发出警告。

这是js代码：

function drawDirective()
{
    var htmlForCompile = '<div ng-controller="testController as tc"><coold settings="tc.settings"></coold></div>';
    var injector = angular.injector(['ng', 'examples']);

    var htmlOut = '';
    injector.invoke(function ($compile) {
    //how to receive scope ???
    var scope = angular.element(htmlForCompile).scope();
    htmlOut = $compile(htmlForCompile)(scope);
    alert(htmlOut);
    });
}


angular.module('examples', []);

(function () 
 {
    var cnt = 'testController';
    angular.module('examples').controller(cnt, testController);//register
    testController.$inject = ['$scope'];

   function testController($scope) {
          var vm = this;
          var settings = {};
          settings.value = "this is test output";
          vm.settings = settings;
    }

    angular.module('examples').directive('coold', function ($compile) {
        return coold($compile);
    });

    function coold(compile){
    var directiveReturn = {
        cmp : compile,
        restrict: 'AEC',
        templateUrl: function(elem, attr) {
            return 'template.html';
        },
        scope: {
            settings: "=settings"
        }
    };
    return directiveReturn;
}
})();

Html代码：

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="examples" id="insideAngular">
      <div ng-controller="testController as tc">
        <coold settings="tc.settings"></coold>
      </div>
    </div>

    <div id="nonAngularJS">
      <button id="click" onclick="return drawDirective()">Draw directive</button>
    </div>

  </body>

</html>

和指令使用的模板：

<div>
  <span>{{settings.value}}</span>
</div>

Answer 1

也许我不太了解你的要求。

我更改了您的指令coold和功能drawDirective。

试试这个plunker。

function drawDirective()
{
  var htmlForCompile = document.querySelector("#id_1");
  console.log(htmlForCompile);
}


angular.module('examples', []);

(function () 
{
 var cnt = 'testController';
angular.module('examples').controller(cnt, testController);//register
testController.$inject = ['$scope'];

 function testController($scope) {
      var vm = this;
      var settings = {};
      settings.value = "this is test output";
      settings.id ="id_1";
      vm.settings = settings;
}

angular.module('examples').directive('coold', function ($compile) {
    return coold($compile);
});

function coold(compile){
var directiveReturn = {
    cmp : compile,
    restrict: 'AEC',
    templateUrl: function(elem, attr) {
        return 'template.html';
    },
    scope: {
        settings: "=settings"
    }
};
return directiveReturn;
}
})();

HTML代码

<!DOCTYPE html>
<html>
 <head>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="examples" id="insideAngular">
  <div ng-controller="testController as tc">
    <coold settings="tc.settings"></coold>
  </div>
</div>

<div id="nonAngularJS">
  <button id="click" onclick="return drawDirective()">Draw directive</button>
</div>

 </body>

</html>

和模板

<div id="{{settings.id}}>
  <span>{{settings.value}}</span>
</div>

已更新

当然，如果您想更改函数drawDirective中的html模板，角度，这些更改将无法看到。

对于angulyar，您需要编写函数drawDirective，如下所示。

function drawDirective()
{
 var htmlForCompile = document.querySelector("#id_1");
 var scope = angular.element(htmlForCompile).scope();
 scope.settings.value+=" drawing";
 scope.$apply();
}

有关$apply的更多信息。

如何在angular之外获得编译的angular指令html

1 个答案:

已更新