Question

我想将一个函数绑定到一个angular指令。 HTML是使用链接函数创建的，而不是使用指令的template或templateUrl属性。问题是在第一种情况下不能绑定函数。

这是我的HTML：

<html ng-app="test">

<body>

  <div ng-controller="testCtrl">
    <test-dir print="printValue(val)">

    </test-dir>
  </div>
</body>

</html>

这是我的脚本文件：

// Code goes here

var testApp = angular.module('test', []);

testApp.controller('testCtrl', function($scope) {

  $scope.printValue = function(val) {
    alert(val);
  }

})

testApp.directive('testDir', function() {
  return {

    replace: true,
    restrict: 'E',
    scope: {
      print: '&' 
    } , 

    link : function(scope, element, attr){
      var template = "<button ng-click='print({val:\"Hello\"})'>Click</button>";
      element.append(template);
    }

  }

})

在此示例中，控制器上的函数printValue未绑定到按钮。

我为上面的例子Here

创建了一个plunker

如果我使用指令的template属性来创建HTML，则相同的示例可以正常工作。

我使用模板属性Here

为功能示例创建了另一个plunker

所以，我的问题是如何在第一个例子中绑定函数？我必须使用链接函数创建HTML，因为HTML必须动态创建，这只是对实际问题的简化。

Answer 1

您需要$compile您的html模板。

在element.append()声明之后添加此内容：

$compile(element.contents())(scope);

这是你的plnkr的working fork。

有关详细信息，请查看角度为$compile service的文档。

如何将函数绑定到使用链接函数创建HTML的

1 个答案: