ng-submit不會在指令控制器內調用函數

Question

好的，我認為問題已經說明了一切，但為了清楚起見，我具有以下形式（我知道這很長……我正在使用bootstrap ...和jquery）：

<form class="form-horizontal" role="form" ng-submit="cal.addEvent()"novalidate>

          <div class="form-group">
            <label class="control-label col-sm-2" for="title">Title:</label>
            <div class="col-sm-8"> 
              <input type="text" class="form-control" id="title" placeholder="Event Title" ng-model="cal.newEvent.title">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="desc">Description:</label>
            <div class="col-sm-8"> 
              <input type="text" class="form-control" id="desc" placeholder="Event Description" ng-model="cal.newEvent.description">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="stime">Start Time:</label>
            <div class="col-sm-8"> 
              <input type="time" class="form-control" id="stime" ng-model="cal.newEvent.start">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="etime">End Time:</label>
            <div class="col-sm-8"> 
              <input type="time" class="form-control" id="etime" ng-model="cal.newEvent.end">
            </div>
          </div>

          </div>
          <div class="form-group"> 
            <div class="col-sm-offset-2 col-sm-8">
              <button type="submit" class="btn btn-success btn-block"  data-role="none">Add Event</button>
            </div>
        </div>
    </form>

該形式位於指令中，如下所示：

app.directive("calendar", function($http) {
    return {
        restrict: "E",
        templateUrl: "templates/calendar.html",
        scope: true,
        transclude:true,
        link: function(scope)  {
            //there's a bunch of code here that I don't believe has anything to do with ng-submit so i left it out
        },
        controller: ["$scope", "$rootScope", function($scope, $rootScope){
            this.newEvent = {};

            this.removeEvent = function(index){
            $http.post("classes/main.php", {"fn": "calendarDel", "id": $scope.chosen[index].id}).success(function(data){
                $scope.getEvents($scope.chosen[index].date);
            });
            }

            this.addEvent = function(){
                //this.newEvent.date = $scope.dateString;
                console.log("AddEvent");
                console.log(this.newEvent);
            }
            $scope.getEvents = function(date){
                $http.post("classes/main.php", {"fn": "calendar", "id": $rootScope.user.id, "data": date}).success(function(data){
                    if(!data.Error){
                    $scope.chosen = data;
                    }
                });

            }
        }],
        controllerAs: 'cal'
    };
});

問題是，當我嘗試提交表單時，沒有看到該函數已被調用的跡象……我希望至少看到console.log("AddEvent");

沒有人看到什么可能導致此問題嗎？

---

FYI

表格位於bootstrap 3 modal div中，它位於從---調用的同一指令內，如果您需要查看“更大的圖片”，可以這么說，問一下:)

我已經嘗試過this.addEvent() ， $scope.addEvent() ， $rootScope.addEvent()不變

Answer 1

您應該只調用addEvent()

<form class="form-horizontal" role="form" ng-submit="addEvent()" novalidate>

並將函數綁定到您的范圍，如

$scope.addEvent = function() {

從該角度文檔expresssions

表達式是根據作用域對象求值的

因此您不應將表達式寫為ng-submit="$scope.addEvent()"等

Answer 2

您應該在指令中添加bindToController: true並指定scope: {}以創建隔離范圍。

當隔離范圍用於組件（請參見上文），並且使用controllerAs時，bindToController：true將允許組件將其屬性綁定到控制器而不是范圍。 實例化控制器時，隔離范圍綁定的初始值已經可用。

參考： $compile