Basic AngularJS Directive

1
votes

I'm new to AngularJS. I'm trying to create my first directive. I'm having some challenges. In an attempt to "learn-by-doing", I decided to create a custom HTML element via a directive. My element will allow a user to choose a day of the week. My control template looks like the following:

myControl.tpl.html

<select>
  <option value="1">Sunday</option>
  <option value="2">Monday</option>
  <option value="3">Tuesday</option>
  <option value="4">Wednesday</option>
  <option value="5">Thursday</option>
  <option value="6">Friday</option>
  <option value="7">Saturday</option>
</select>

myControl.js

angular.module('myControls.dayPicker', [])
    .directive('myDayPicker', function () {
        return {
            restrict: 'E',
            scope: { value: '=' },
            templateUrl: 'dayPicker/myControl.tpl.html',
            controller: function ($scope) {
            }
        };
    });

This directive should be reusable across views. To use it, I want to be able to enter the following code:

The selectedDay value will be a value that is on the $scope in my controller. For some reason, I can't seem to get two way binding to work. How do I make it so:

  1. The selected day option value gets set to the selectedDay $scope property?
  2. How do I automatically set the correct option if the selectedDay is already set?

Thank you!

1
angularjsangularjs-directive
please provide Plunker or Fiddle with above mentioned example and issue you are facing - Maxim Shoustin

1 Answers

0
votes

I have created a working example which shows how to set a selected day in the controller:

http://jsfiddle.net/2jrGe/

This uses ng-change to send the data back to a function in the controller:

<select ng-model="customSpice" ng-change="spicy(customSpice)">

Ignore the references to 'Spicy' stuff... I created this example from one of the fiddles in the AngularJS docs here:

http://docs.angularjs.org/guide/controller