Question

我在自定义Angular指令中有一个奇怪的行为，它导致页面在单击自定义指令中的“保存按钮”时刷新。为了简单和调试，我在父DOM中创建了相同的按钮行为，但这并不会导致页面刷新。这是我的代码：

//Main DOM parent.html
<form>
        <div class="form-group">
            <div class="col-sm-2 col-sm-offset-1">
                <button class="btn btn-primary" ng-click="vm.saveReleases()">Save Changes</button>
            </div>
            <div class="col-sm-2 col-sm-offset-1">
                <button class="btn btn-primary" type="submit">Send to Ingestion</button>
            </div>
        </div>
</form>

// Parent controller parent.controller.js

function saveReleases(){
        console.log("Hello");
    }

以下是自定义指令代码：

custom directive: custom-directive.html
<form>
 .
 .
 .
<div class="form-group">
            <div class="col-sm-2 col-sm-offset-1">
                <button class="btn btn-primary" ng-submit="vm.saveRelease()">Save Changes</button>
            </div>
            <div class="col-sm-2 col-sm-offset-1">
        <button class="btn btn-primary" type="submit">Send to Ingestion</button>
    </div>
</div>
</form>

以下是自定义html指令的指令： //custom.directive.js

(function(){

'use strict';

angular.module('app.uploadedReleases').directive('releaseMetadata', releaseMetadata);

function releaseMetadata(){
    var releaseMetadataDirective = {
        restrict : 'E',
        templateUrl: 'app/uploadedReleases/directive/custom-directive.html',
        scope: {
            selected :'='
        },
        controller: ReleaseMetadataCtrl,
        controllerAs: 'vm'
    };
return releaseMetadataDirective;
}

function Album(title, genre){
    this.title = title;
    this.genre = genre;

    this.merge = function(album){
        album.title = this.title;
        album.genre = this.genre;
        return album;
    }
}

ReleaseMetadataCtrl.$inject = ['$scope'];
function ReleaseMetadataCtrl($scope) {
    var vm = this;
    vm.saveRelease = saveRelease;
    console.log("scope selected: ")
    console.log($scope.selected);
    vm.formAlbum = new Album($scope.selected.album.data.title, $scope.selected.album.genre);

    console.log("scope vm.formAlbum:")
    console.log (vm.formAlbum);


    function saveRelease(){
        console.log("save in directive");
    }
}
})();

实际上应该在父DOM中调用自定义指令标记，这就是为什么我创建了自定义指令但是当它出现时单击自定义指令元素中的SAVE按钮导致它重新加载，但点击了SAVE对于父DOM，在控制台上完全调用并打印HELLO。单击按钮时，甚至不会调用custom指令中的函数。有线索吗？

AngularJS ng-click或ng-submit in指令导致页面刷新

0 个答案: