无法从Angular中的模板调用表单提交方法答案

【问题标题】：Cannot call form submit method from template in Angular无法从Angular中的模板调用表单提交方法
【发布时间】：2014-09-02 20:59:03
【问题描述】：

我已经从条件 templateurl 加载了一个表单，现在我无法在提交时调用任何函数。如果我将这段 html 代码直接放入我的页面中，它可以工作，但在动态插入时不会。控制器在body标签中为页面全局设置关于如何解决这个问题的任何想法？

<form role="form" ng-submit="message.send_message()">
<div class="form-group">
    <label class="control-label" for="message_title">Title</label>
    <input ng-model="message.message_title" type="text" class="form-control  col-xs-3" " name="message_title" id="message_title">
</div>
<div class="form-group">
    <label class="control-label" for="message_body">Body</label>
    <textarea ng-model="message.message_body" rows="" rows="5" class="form-control col-xs-3" name="message_body" id="message_body"></textarea>
</div>
<input ng-model="message.message_event_id" type="hidden" id="message_event_id" name="message_event_id" value="{{event.event_id}}">
<button ng-click="message.send_message()"  type="button" class="btn btn-info" style="margin: 1em 25% 1em 25%">New Message</button>
</form>

 $scope.message = {};
     // send message function
     $scope.message.send_message = function (message) {
         console.log("send_message called");
         var result = {};
         result = angular.copy(message);
         console.dir(result);
     }

【问题讨论】：

你能创建一个 plunkr 吗？
您的按钮应该是 type="submit" 并删除 ng-click
我们去plnkr.co/edit/zijm24?p=preview
不，@JonSamwell 也不起作用

标签： javascript forms angularjs

【解决方案1】：

当你在你的指令中声明时

 scope: {
           isOk: '@'
        },

您将指令的范围与控制器的范围隔离开来。这就是你的ng-click="send_message(bodymessage)" 不起作用的原因（它在指令范围内搜索send_message）

如果您想与指令共享控制器的作用域，请从指令中删除 scope: { ... } 并在控制器的作用域中创建 isOk

示例：

Plunker

#请注意，在许多情况下，建议将指令的范围与控制器的范围分开

【讨论】：

【解决方案2】：

如果您想让您的指令可重用，您可以保留隔离范围并使用 & 绑定，它会创建一个辅助函数来调用外部范围 (plnkr) 上的函数：

HTML：

<script type="text/ng-template" id="DirectiveTemplate.html">
  <input ng-model="directiveText">
  <p>You entered {{directiveText}}</p>
  <button ng-click="buttonClicked()">Do It</button>
  <button ng-click="mySubmit({directiveMessage: directiveText})">Another Way</button>
</script>

<h1>Hello Plunker!</h1>
<my-directive my-submit="sendMessage(directiveMessage)"/>

Javascript：

angular.module('MyApp', [])
  .directive('myDirective', function() {
    return {
      restrict: "E",
      scope: {
        mySubmit: '&',
      },
      transclude: true,
      templateUrl: 'DirectiveTemplate.html',
      link: function(scope, element, attrs) {
        scope.buttonClicked = function() {
          scope.mySubmit({directiveMessage: scope.directiveText});
        }
      }
    }
  })
  .controller('MyCtrl', function($scope) {
    $scope.sendMessage = function(message) {
      alert(message);
    }
  })

directiveText 是隔离作用域上的属性。 Angular 在隔离作用域上创建 mySubmit 辅助函数。它会将所有函数放入指令元素的my-submit 属性中，就像ng-click 所做的那样。您可以通过将对象传递给该函数并将这些参数作为对象的属性来传递命名参数，例如directiveMessage。我在这里保留了不同的名称，因此您可以看到directiveText 的值通过directiveMessage 绑定到最终调用的函数中的message。

【讨论】：