Question

我做了一个指示，显示一个带有＆＃39;添加＆＃39;按钮。该表在同一页面中表示两次，但具有不同的表单和表格数据：

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

在链接功能中，我定义了一个＆＃39; add＆＃39;将使用指令声明中指定的表单和模型的函数：

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);

问题是添加功能永远不会被“添加项目”调用。链路...

**我无法使用模板配置对象，因为我需要动态模板

Answer 1

您可以通过提供一个函数来动态构建模板，该函数将字符串返回到指令的模板属性：

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);
    });
  }

Answer 2

试试这个：

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

链接中定义的范围函数未触发

2 个答案: