gpt4 book ai didi

javascript - Angular ng-click 不会触发我指令中的函数

转载 作者:行者123 更新时间:2023-11-30 16:40:51 28 4
gpt4 key购买 nike

我有一个相当大的 Angular 项目,我使用了很多指令,它们都工作正常。我遵循了一个最佳实践指南,其中提到使用 controllerAs: vm( View 模型)而不是 $scope

这在整个项目中都运行良好,但特别是在一个指令中,vm 在我的局部指令中似乎不可调用。

指令:

 (function() {
"use strict";

angular.module('bandzest.directive.create.release', [])
.directive('createRelease', CreateRelease);

function CreateRelease() {

var directive = {
link: link,
restrict: 'E',
templateUrl: './app/components/release/partial.create.release.html',
controller: function(content, $cookies, $scope, $rootScope) {

var vm = this;
vm.save = save;

vm.release = {
artist: $cookies.get('artistId')
};

vm.files = [];
vm.tracks = [];

$scope.$on("fileSelected", function (event, args) {
$scope.$apply(function () {
vm.files.push(args.file);
});
});

function save() {

$http({
method: 'POST',
url: api+"/api/v1/releases",
headers: { 'Content-Type': undefined },
transformRequest: function (data) {
var formData = new FormData();

formData.append("release", angular.toJson(data.release));

for (var i = 0; i < data.files.length; i++) {
formData.append("file" + i, data.files[i]);
}

return formData;
},
data: { release: $scope.release, files: vm.files },
params: { user: $cookies.userId }
}).success(function (data, status, headers, config) {
console.log(data);
}).error(function (data, status, headers, config) {
console.log(data);
});
}
},
controllerAs: 'vm',
bindToController: true
}

return directive;

function link() {

}
}
})();

部分:

<div class="index-header">
<ul>
<li><a trigger-upload class="primary">+ Upload tracks</a></li>
<li><a href="#">Cancel</a></li>
</ul>
<div class="clear"></div>

  <div class="release-creation">

<div class="release-section-title">Release Information</div>
<div class="release-section">
<div class="release-create-artwork">
<img src="img/artwork.jpg" alt="">
</div>

<div class="release-create-basic-information">
<div class="release-create-column">
<input autofocus placeholder="Release title" type="text" ng-model="vm.release.title" class="input">
<input ng-model="vm.release.genre" id="release-create-genre" placeholder="Genres (comma separated)" type="text" class="input">
<textarea ng-model="vm.release.tags" id="release-create-tags" placeholder="Tags (comma seperated)" class="input textarea"></textarea>
</div>

<div class="release-create-column">
<div class="release-date-choice">
<div class="release-date-option">
<input ng-model="vm.release.releaseDate" checked name="release-date" id="release-radio-current" type="radio" class="release-radio">
<label for="release-radio-current">Current date</label>
<div class="clear"></div>
</div>

<div class="release-date-option">
<input ng-model="vm.release.releaseDate" name="release-date" id="release-radio-future" type="radio" class="release-radio">
<label for="release-radio-future">Use a different release date</label>
<div class="clear"></div>
</div>
</div>
<div class="release-create-date">
<input disabled placeholder="DD" type="text" class="input input-day">
<input disabled placeholder="MM" type="text" class="input input-month">
<input disabled placeholder="YYYY" type="text" class="input input-year">
</div>
<textarea ng-model="vm.release.description" placeholder="Description" class="input textarea"></textarea>

</div>
</div>
<div class="clear"></div>
</div>
<div class="release-section-title">Pricing</div>
<div class="release-section">
<div class="release-pricing">
<div class="release-input">
<div class="form-group release-price">
<label for="whole-release-price">Whole release price</label>
<input ng-model="vm.release.releasePrice" id="whole-release-price" type="number" class="input">
</div>
<div class="form-group track-price">
<label for="single-track-price">Single track price</label>
<input ng-model="vm.release.trackPrice" id="single-track-price" type="number" class="input">
</div>
<div class="form-group clear">
<input ng-model="vm.release.payMore" id="pay-more" type="checkbox" value="false">
<label for="pay-more">Let people pay more if they want?</label>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="release-section-title">Track List</div>
<div class="release-section">
<input id="track-upload" type="file" file-upload class="hidden" multiple>
<div class="track-list">
<ul ng-sortable="{ group: 'tracks', animation:150 }" id="release-track-list">
<li style="display:none;"></li>
</ul>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="vm.save">Submit</button>

还有我的路线(注意/releases/create 没有 Controller ,因为它使用指令)

angular.module('bandzest.routes.release', [])
.config(ReleaseRouter);

ReleaseRouter.$inject = ['$routeProvider', '$locationProvider', 'USER_ROLES'];

function ReleaseRouter($routeProvider, $locationProvider, USER_ROLES) {

$routeProvider
.when('/releases/create', {
templateUrl: '/app/components/release/view.create.release.html',
data: {
authorisedRoles: [USER_ROLES.guest, USER_ROLES.user, USER_ROLES.artist]
}
})
.when('/releases/:id', {
templateUrl: '/app/components/release/view.show.release.html',
controller: 'ReleaseController',
controllerAs: 'vm',
data: {
authorisedRoles: [USER_ROLES.guest, USER_ROLES.user, USER_ROLES.artist]
}
})
.when('/releases', {
templateUrl: '/app/components/release/view.index.release.html',
controller: 'ReleaseController',
controllerAs: 'vm',
data: {
authorisedRoles: [USER_ROLES.guest, USER_ROLES.user, USER_ROLES.artist]
}
});
}

当我点击提交按钮时,没有任何反应。我从部分代码中取出了所有代码,并将其替换为一个简单的 ng-click 到指令中的一个函数,向控制台写入一些东西,但也没有用。

最后,调用指令的 View :

<artist-menu></artist-menu>
<section class="page-content">
<div class="releases-container">
<create-release></create-release>
</div>
</section>

最佳答案

ng-click 指令接受 "expression to evaluate upon click" .你给它的是一个引用。您是否尝试过以下方法?

<button class="btn btn-primary" ng-click="vm.save()">Submit</button>

关于javascript - Angular ng-click 不会触发我指令中的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32024701/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com