How can I access attribute of controller in directive from calling controller

Question

I'm quite new to Angular, but am attempting to access an attribute called hour from a directive's controller inside another controller (the parent wrapping controller of the directive).

Here is how I setup the directive and its controller:

(function () {

    angular.module("datePicker", [])
        .directive("datePicker", function () {

            return {
                restrict: "E",
                scope: {
                    ctrl: '=ctrl'
                },
                templateUrl: "app/views/datepicker.html"
            };
        })
        .controller('datePickerController', function ($scope) {
            this.min = "";
            this.hour = "";
            this.minutes = [];
            this.hours = [];
            let i = 0;
            for (i; i < 60; i++) {
                let time = "";
                if (i <= 9) {
                    time = "0" + i;
                } else time = i;
                this.minutes.push(time);
                if (time <= 23) {
                    this.hours.push(time);
                }
            }

            $scope.somechange = function (v) {
                alert(v);
                $scope.hour = v;
                $scope.$parent.printFrom = "It changed";
            }
        });
})();

This is the implementation of the directive:

<div ng-controller="datePickerController as ctrl">
    <md-input-container>
        <label>Hour</label>
        <md-select ng-change="somechange(ctrl.hour)" ng-model="ctrl.hour">
            <md-option ng-repeat="hour in ctrl.hours" ng-value="hour">
                {{ hour }}
            </md-option>
        </md-select>
    </md-input-container>
</div>

And how it's being called from the 'parent':

<div>
    <date-picker ctrl="from"></date-picker> {{ from.today | date:'short' | split:' ':0}}, {{ $scope.hour }}
</div>

As you can see I am attempting to access the hour attribute from the datepicker's scope, but I'm unable to access it (or at least it's not updating).

I can see it fine in the alert that gets called in its ng-change event, but I can't seem to find it on the parent's scope...

One thing I've noticed is this ctrl: '=ctrl'. It should be just ctrl: '=' if you want to pass a reference to your directive. Also, to access it, you need to use $scope.ctrl, not just $scope. — Emin Laletovic
– Emin Laletovic, Commented May 22, 2017 at 12:47
Still can't seem to access the attribute, neither in the parent's .js file nor in the markup... — geostocker
– geostocker, Commented May 22, 2017 at 12:50

Lemmy · Accepted Answer · 2017-05-22 21:03:10Z

You have to add attribute hour on parent object.

Code for controller and directive:

var app = angular.module('datepicker', []);

app.controller('ParentController', function($scope) {
  $scope.parent = {};
});

app.directive('datePicker', function () {
    return {
        restrict: 'E',
        scope: {
            parent: '='
        },
        templateUrl: 'app/views/datepicker.html'
    };
})
.controller('datePickerController', function ($scope) {
    this.min = '';
    this.hour = '';
    this.minutes = [];
    this.hours = [];
    let i = 0;
    for (i; i < 60; i++) {
        let time = '';
        if (i <= 9) {
            time = '0' + i;
        } else time = i;
        this.minutes.push(time);
        if (time <= 23) {
            this.hours.push(time);
        }
    }

$scope.somechange = function (v) {
    alert(v);
    $scope.parent.hour = v;
    $scope.$parent.printFrom = 'It changed';
  }
});

Create directive as html element:

<date-picker parent="parent"></date-picker>
<p>{{parent.hour}}</p>

Collectives™ on Stack Overflow

How can I access attribute of controller in directive from calling controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related