Question

我需要动态添加一个按钮到我的HTML代码。问题是它内部有一个角度链接，一旦页面加载就不能工作。我一直在研究，看起来我需要使用$ compile才能使它工作。

这是我尝试过的两个代码：

代码1

angular.injector(['ng']).invoke(['$compile', '$rootScope', function(compile, rootScope){

        var scope = rootScope.$new();

        var result = compile('<a ui-sref="app.form.matter({method:\'new\',id:\'\'})" type="button" class="btn dark_blue_bomhard m-b-5 nuevocliente" >New matter</a>')(scope);
        scope.$digest();
        $("div.toolbar").append(result);
    }]);

此代码没有给我任何错误，甚至将按钮放在必须的位置，但链接仍然不起作用。

代码2

angular.element("div.toolbar").append($compile('<a ui-sref="app.form.matter({method:\'new\',id:\'\'})" type="button" class="btn dark_blue_bomhard m-b-5 nuevocliente" >New matter</a>'))(scope);

第二行代码给出了一个错误：“ReferenceError：$ compile未定义”

我在控制器中有两个代码（不是同时）。

有什么想法吗？

Answer 1

之前我遇到了同样的问题，我通过

修复了它

app.controller('controller', [
  '$scope','$http', '$window', 'promiseTracker', '$timeout', '$compile',
  function($scope, $http, $window, promiseTracker, $timeout, $compile) {
  ...........
  }]);

在使用之前定义$ compile，因此不会出现“ReferenceError：$ compile not defined”这样的错误。

Answer 2

为什么不把它作为一个指令呢？ Angular指令默认调用$ compile，你可以给它一个实例化自己范围的选项。

angular
   .module('app.module')
   .directive('myButtonDirective', myButtonDirective);

function myButtonDirective() {
   var directive = {
      templateUrl: 'app/button-directive.html',
      scope: {},
      restrict: 'E',
      replace: true
   };
   return directive;
}

然后您的app/button-directive.html看起来像

<a ui-sref="app.form.matter({method:'new',id:'\'})" type="button" class="btn dark_blue_bomhard m-b-5 nuevocliente">New matter</a>

您所要做的就是将新指令放在html中

<div class="toolbar">
    /** Your HTML Here **/
    <my-button-directive></my-button-directive>
</div>

Angular $ compile无效

2 个答案: