Give angular directive a model name to access it's scope in the parent

Question

I'm trying to access the isolated scope of a directive by using the model attribute on it's element when I use it in the HTML. Eg.

<div controller="parent">
    <hello-world data-ng-model="hw"/>
    <input type="submit"/>
</div>

The controller for the parent:

function($scope){
  $scope.submit = function(){
    alert($scope.hw.t);
  }
};

The directive for the hello-world:

app.directive('helloWorld', function() {
  return { 
    link: function(scope, element, attrs){
      scope.t = 'test';
    }, 
    replace: true, 
    restrict: 'E', 
    scope: {}, 
    template: '<h5>Hello world {{t}}</h4>'
  };
});

t is defined in the isolated scope, because it is displayed correctly. However, when I click the submit button, I get an error because hw is undefined. (Because the hello-world scope isn't being assigned to the 'hw' scope variable of the parent. How can I let hw be defined as the scope of the hello-world directive? My use case is to make a date picker that exposes the date picked through it's scope. Like

<date-picker ng-model="date1"/>
<date-picker ng-model="date2"/>

In the directive's scope, I would ensure that the month, year, etc. are defined. Then in the parent controller, I can use $scope.date1.month and similar to access the date picked.

Indeed, `hw` is firstly undefined in `parent` controller's scope. You should either check if `$scope.hw` is defined before accessing it or give it a default value `$scope.hw = {t: 'Hello world'};` — ngasull, Apr 22 '14 at 15:03
@blint, I know how to give a default value to a model that is an object, like that. But the difference is that I want the default (and the value in general) to be assigned by the hello world directive. — Tyler, Apr 22 '14 at 15:26
It sounds like you need to setup two-way binding for some scope values between your parent controller and directives instead of using ng-model e.g. http://stackoverflow.com/questions/18882428/angularjs-custom-directive-two-way-binding Or am I misunderstanding something? Your plunkr does not encapsulate the code you've provided on SO. — Marc Kline, Apr 22 '14 at 15:41
just ran in to this: http://stackoverflow.com/questions/14115701/angularjs-create-a-directive-that-uses-ng-model — Marc Kline, Apr 22 '14 at 22:29

score 2 · Accepted Answer · edited Apr 22 '14 at 16:32

2

Following to your comments, it seems you need to make custom validateable elements using ngModel.

According to ngModel's documentation, this can be done by using manually ngModelController. The following page should contain all the information you need about that (look at script.js in the example): https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Good luck.

An example of a directive that works with ngModel

edited Apr 22 '14 at 16:32

Nate Diamond

5,525
2
31
57

answered Apr 22 '14 at 15:48

ngasull

4,206
1
22
36

+0.5 for the `Good luck.` :) – gkalpak Apr 22 '14 at 15:54
That was it. Not exactly, as it doesn't just assign the inner scope to the model, I wouldn't be surprised if such a construct doesn't even exist. I was underestimating the inner complexity of a model (or maybe overestimating it's universality). – Tyler Apr 22 '14 at 16:12
Indeed you can't just send your ngModel through your directive. In fact, adding the `ng-model` to your custom element will decorate your directive and will instantiate a separate `ngModelController` controller. If you need to combine the functionnalities, you have to do some custom work in order to use the instantiated `ngModelController`. As mentionned by ExpertSystem, `Good luck` was part of the answer ;) – ngasull Apr 22 '14 at 16:18

Give angular directive a model name to access it's scope in the parent

1 Answers1