Question

我正在尝试编写一个服务，它将为指令编译HTML并将其附加到body元素。虽然指令正在处理文本，但函数不是。

这是一个更简单的版本，我无法对ng-click指令执行相同的操作并从控制器进行编译。任何人都可以告诉我如何实现这一目标。我的目标是创建一个非常基本的指令，其功能类似于来自Angular材质的角度ui-bootstrap或对话服务的模态。

angular
  .module('app', [])
  .controller('ctrl', ctrl);

function ctrl($scope, $compile) {
  var html = '',
    newScope = $scope.$new(true),
    newScope1 = $scope.$new(true);

  $scope.text = 'from controller';
  $scope.fun = function() {
    alert('from controller');
  };
  newScope.text = 'from controller with new scope';
  newScope.fun = function() {
    alert('from controller with new scope');
  };
  newScope1.text = 'from controller with new scope1';
  newScope1.fun = function() {
    alert('from controller with new scope1');
  };

  html = $compile('<button ng-click="fun">{{text}}</button>')($scope);
  angular.element('body').append(html);

  html = $compile('<button ng-click="fun">{{text}}</button>')(newScope);
  angular.element('body').append(html);

  $compile('<button ng-click="fun">{{text}}</button>')(newScope1, function(clonedElement, scope) {
    console.log(clonedElement, scope);
    angular.element('body').append(clonedElement);
  });
}

<!DOCTYPE html>
<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl">
  <h1>Hello Plunker!</h1>
</body>

</html>

plunkr

Answer 1

你这样做只是调用方法使用ng-click="fun()"而不是ng-click="fun"（唯一缺少的）

html = $compile('<button ng-click="fun()">{{text}}</button>')(newScope);

如何使角度函数可用于编译模板的角度

1 个答案: