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

如果要使指令可重用，可以保留隔离范围并使用&绑定，这将创建一个辅助函数来调用外部作用域上的函数（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。

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

2 个答案: