無法從Angular中的模板調用表單提交方法

Question

我已從條件templateurl加載了一個表單，現在我無法調用Submit上的任何函數。 如果我將這段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);
     }

Answer 1

當你在你的指令中聲明時

 scope: {
           isOk: '@'
        },

您正在將指令的范圍與控制器的范圍隔離開來。 這就是為什么你的ng-click="send_message(bodymessage)"不起作用（它在指令范圍內搜索send_message ）

如果您想與指令共享控制器的范圍，請從指令中刪除scope: { ... }並在控制器范圍內創建isOk

例：

Plunker

＃請注意，在許多情況下，建議將指令的范圍與控制器的范圍分開

Answer 2

如果要使指令可重用，可以保留隔離范圍並使用& binding，這將創建一個輔助函數來調用外部作用域上的函數（ 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在最終被調用的函數。