My inspiration from angular ui has led me to create a front-end library made up of components, all as angularjs directives. This allows users to easily implement directives with specific configurations and achieve the desired component results.
Here is an example of how the directive will appear:
<date-picker
date-format="MM.DD.YYYY HH:mm"
enable-navigation
date-picker-id="datetimepicker2"
date-picker-model="myModel1">
</date-picker>
The concept for usage involves wrapping it in a user-created controller, which can access the directive scope like this:
<div ng-controller="myController">
<date-picker
...
date-picker-model="myModel1">
</date-picker>
</div>
(I use component-name-model because the component directive template may have multiple models) The code in the controller would look like this:
angular.module('myApp').controller('myController',['$scope', function($scope) {
$scope.myModel1; //this scope binds to the datepicker template scope
}]);
As I am new to angularJs, I have a couple of questions:
How can I make the controller access the directive scope using this syntax? It seems that the controller is not recognizing the directive scope (see my code in plunker).
Currently, I am facing an issue with passing the model to the template. In the directive, I have defined date-picker-model="myModel1" and then the directive will retrieve the attributes and pass them to the template like this:
if('datePickerModel' in attrs){ $scope.datePickerModel = attrs.datePickerModel; }When I use expressions on the templateUrl, ng-model="{{datePickerModel}}" does not work.
The code is quite lengthy, so I recommend checking out my plunker for a better understanding.
Thank you :-)