link 中定义的范围函数未触发

Question

我做了一个指令，显示一个带有 'add' 按钮的列表。 table 在同一页中出现两次，但形式不同，并且 table-data:

<list ng-model="list1" form-name="form1"></list>
<list ng-model="list2" form-name="form2"></list>

在 link 函数中，我定义了一个 'add' 函数，它将使用指令声明中指定的表单和模型：

scope: {
  list: '=ngModel',
  formName: '@',
},
link: function postLink(scope, element, attrs) {

  scope.add = function() {
    FormService.show(formName).then(function(item) {
      list.push(item);
    });
  }

  var addButton = angular.element('<a ng-click="add()">ADD ITEM</a>');
  var container = angular.element('<div></div>');
  container.append($compile(addButton)(scope));
  element.replaceWith(container);

问题是添加函数永远不会被 'ADD ITEM' link...

** 我不能使用模板配置对象，因为我需要动态的模板

Answer 1

试试这个：

element.append('<a ng-click="add()">ADD ITEM</a>');
$compile(element.contents())(scope)

Answer 2

您可以通过向指令的模板属性提供 returns 字符串的函数来动态构建模板：

scope: {
  list: '=ngModel',
  formName: '@',
},
template: function(element, attrs) {
    var addButton = angular.element('<a ng-click="add()">ADD ITEM</a>');
    var container = angular.element('<div></div>');
    container.append(addButton);
    var str = container.prop('outerHTML');
    return str;
},
link: function postLink(scope, element, attrs) {    
  scope.add = function() {
    FormService.show(formName).then(function(item) {
      list.push(item);
    });
  }

link 中定义的范围函数未触发

Scope function defined in link not fired

angularjs

angularjs-directive

angularjs-scope