我是angularjs的新手。我创建了一个名为newActivity的指令，并使用该指令绑定对象，变量和函数。在这里我希望当我点击提交/取消按钮时，它应该清除来自newActivity指令和控制器的所有ng-model绑定变量。
指令： -
angular
.module('app')
.directive('newActivity', newActivity);
function newActivity() {
var directive = {
restrict: 'E',
scope: {
newActivity: '=',
underUsers: '=',
actTypes: '=',
callTypes: '=',
forAct: '@',
action: '&',
cancel: '&'
},
template: '<div class="box-header"> <h2>{{forAct}} {{newActivity.type | uppercase}} Activity</h2> </div> <div class="box-divider m-a-0">' +
'</div> <div class="box-body"> <form ng-submit="action()" name="newActForm" role="form">' +
'<div class="form-group row"><div class="col-sm-10"><select class="form-control" ng-model="newActivity.type" ng-options="actType.type as actType.title for actType in actTypes"></select></div></div> ' +
'<div ng-if="newActivity.type==\'notes\'" class="form-group row"><div class="col-sm-10"><textarea required ng-model="newActivity.description" class="form-control" rows="2"></textarea></div></div> ' +
'<div ng-if="newActivity.type==\'meeting\' || newActivity.type==\'email\' || newActivity.type==\'task\'" class="form-group row"><div class="col-sm-10">' +
'<div class="form-group row"><div class="col-sm-10"><input required placeholder="Select Date" type="text" class="form-control w-auto inline" ng-model="newActivity.date" data-date-format="dd-MM-yyyy" data-autoclose="true" data-date-type="number" data-icon-left="fa fa-chevron-left" data-icon-right="fa fa-chevron-right" placeholder="From" bs-datepicker></div></div>' +
'<div class="form-group row"><div class="col-sm-10"><input required placeholder="Select Time" type="text" class="form-control" ng-model="newActivity.time" data-time-format="HH:mm" data-time-type="number" name="time2" data-icon-up="fa fa-chevron-up" data-icon-down="fa fa-chevron-down" bs-timepicker></div></div>' +
'<div class="form-group row"> <label class="col-sm-4 form-control-label">Reminder</label> <div class="col-sm-8"> <div class="checkbox"> <label class="ui-switch m-t-xs m-r"> <input type="checkbox" ng-model="newActivity.isReminder" value=""> <i></i> </label> </div> </div> </div>' +
'<div ng-if="newActivity.isReminder" col-sm-8>' +
'<div class="form-group row"><div class="col-sm-10"><input required placeholder="Reminder Date" type="text" class="form-control w-auto inline" ng-model="newActivity.reminder.date" data-icon-left="fa fa-chevron-left" data-date-format="dd-MM-yyyy" data-autoclose="true" data-date-type="number" data-icon-right="fa fa-chevron-right" placeholder="From" bs-datepicker></div></div> ' +
'<div class="form-group row"><div class="col-sm-10"><input required placeholder="Reminder Time" type="text" class="form-control" ng-model="newActivity.reminder.time" data-time-format="HH:mm" data-time-type="number" name="time1" data-icon-up="fa fa-chevron-up" data-icon-down="fa fa-chevron-down" bs-timepicker></div></div> ' +
'</div>' +
'<div class="form-group row"> <label class="col-sm-4 form-control-label">Assign To Other</label> <div class="col-sm-8"> <div class="checkbox"> <label class="ui-switch m-t-xs m-r"> <input type="checkbox" ng-model="newActivity.isAssignOther" value=""> <i></i> </label> </div> </div> </div>' +
'<div ng-if="newActivity.isAssignOther" col-sm-8>' +
'<div class="form-group row"><div class="col-sm-10"><select class="form-control" ng-model="newActivity.assignTo" ng-options="user._id as user.name for user in underUsers"></select></div></div> ' +
'</div>' +
'<div class="form-group row"><div class="col-sm-10"><textarea required placeholder="Remarks" class="form-control" ng-model="newActivity.description" rows="2"></textarea></div></div>' +
'</div></div> ' +
'<div ng-if="newActivity.type==\'call\'" class="form-group row"><div class="col-sm-10">' +
'<div class="form-group row"><div class="col-sm-10"><select class="form-control" ng-init="newActivity.callType = \'out\'" ng-model="newActivity.callType" ng-options="callType.type as callType.title for callType in callTypes"></select></div></div>' +
'<div class="form-group row"><div class="col-sm-10"><input required placeholder="Select Date" type="text" class="form-control w-auto inline" ng-model="newActivity.date" data-date-format="dd-MM-yyyy" data-autoclose="true" data-date-type="number" data-icon-left="fa fa-chevron-left" data-icon-right="fa fa-chevron-right" placeholder="From" bs-datepicker></div></div>' +
'<div class="form-group row"><div class="col-sm-10"><input required placeholder="Select Time" type="text" class="form-control" ng-model="newActivity.time" data-time-format="HH:mm" data-time-type="number" name="time2" data-icon-up="fa fa-chevron-up" data-icon-down="fa fa-chevron-down" bs-timepicker></div></div>' +
'<div class="form-group row"> <label class="col-sm-4 form-control-label">Reminder</label> <div class="col-sm-8"> <div class="checkbox"> <label class="ui-switch m-t-xs m-r"> <input type="checkbox" ng-model="newActivity.isReminder" value=""> <i></i> </label> </div> </div> </div>' +
'<div ng-if="newActivity.isReminder" col-sm-8>' +
'<div class="form-group row"><div class="col-sm-10"><input required placeholder="Reminder Date" type="text" class="form-control w-auto inline" ng-model="newActivity.reminder.date" data-icon-left="fa fa-chevron-left" data-date-format="dd-MM-yyyy" data-autoclose="true" data-date-type="number" data-icon-right="fa fa-chevron-right" placeholder="From" bs-datepicker></div></div> ' +
'<div class="form-group row"><div class="col-sm-10"><input required placeholder="Reminder Time" type="text" class="form-control" ng-model="newActivity.reminder.time" data-time-format="HH:mm" data-time-type="number" name="time1" data-icon-up="fa fa-chevron-up" data-icon-down="fa fa-chevron-down" bs-timepicker></div></div> ' +
'</div>' +
'<div class="form-group row"> <label class="col-sm-4 form-control-label">Assign To Other</label> <div class="col-sm-8"> <div class="checkbox"> <label class="ui-switch m-t-xs m-r"> <input type="checkbox" ng-model="newActivity.isAssignOther" value=""> <i></i> </label> </div> </div> </div>' +
'<div ng-if="newActivity.isAssignOther" col-sm-8>' +
'<div class="form-group row"><div class="col-sm-10"><select class="form-control" ng-model="newActivity.assignTo" ng-options="user._id as user.name for user in underUsers"></select></div></div> ' +
'</div>' +
'<div class="form-group row"><div class="col-sm-10"><textarea required placeholder="Remarks" class="form-control" ng-model="newActivity.description" rows="2"></textarea></div></div>' +
'</div></div> ' +
'<div class="form-group row m-t-md"> <div class="col-sm-offset-2 col-sm-10">' +
'<input type="submit" class="btn success" value="Save">' +
'<button type="button" style="margin-left:5px" ng-click="cancel()" class="btn danger">Cancel</button>' +
'</div></form> </div>',
link: function(scope, element, attrs) {},
controller: function($scope) {}
};
return directive;
}
控制器： -
function addNewActivity() {
vm.loading = true;
vm.newActivity = {}; //Here vm.newActivity is not clear fields from "newActivity" directive
}
HTML： -
<new-activity for-act='Add' action='addNewActivity()' cancel='closeAddNewActivity()' new-activity='newActivity' under-users='underUsers' act-types='actTypes' call-types='callTypes'></new-activity>
答案 0 :(得分：1)
您正在使用controllerAs synthax，您应该在调用函数前加上前缀并使用您指定名称的变量（此处为vm）。
例如，如果您的代码：
<new-activity for-act='Add'
action='addNewActivity()'
cancel='closeAddNewActivity()'
new-activity='newActivity'
under-users='underUsers'
act-types='actTypes'
call-types='callTypes'>
</new-activity>
Shoud be：
<new-activity for-act='Add'
action='vm.addNewActivity()'
cancel='vm.closeAddNewActivity()'
new-activity='vm.newActivity'
under-users='vm.underUsers'
act-types='vm.actTypes'
call-types='vm.callTypes'>
</new-activity>
答案 1 :(得分：0)
使用new-activity='vm.newActivity'代替new-activity='newActivity
并使用vm.addNewActivity()和vm.closeAddNewActivity()
这样每个绑定都有来自控制器的正确来源
<new-activity for-act='Add' action='vm.addNewActivity()' cancel='vm.closeAddNewActivity()' new-activity='vm.newActivity' under-users='vm.underUsers' act-types='vm.actTypes' call-types='vm.callTypes'></new-activity>