1

I am newbie in angularjs. I have create directive called newActivity and bind object, variables and function with this directive. Here i want that when i clicked on submit/cancel button then it should clear all ng-model bind variables from both newActivity directive and from controller.

Example

Directive:-

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;
}

Controller:-

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>
Dario
  • 6,152
  • 9
  • 39
  • 50
user7104874
  • 1,321
  • 2
  • 15
  • 21

2 Answers2

1

You are using the controllerAs synthax, you should prefix your calls to functions and use of variables with the name you specify (here vm).

For example if your code:

<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>
Community
  • 1
  • 1
Mistalis
  • 17,793
  • 13
  • 73
  • 97
0

Use new-activity='vm.newActivity' instead of new-activity='newActivity

And also use vm.addNewActivity() and vm.closeAddNewActivity()

So that every bindings have the correct source from your controller

<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>
Salih Şenol Çakarcı
  • 2,320
  • 13
  • 23