AngularJS accessing an attribute in a directive from a controller

Question

I need to pass an Id defined in the directive to the associated controller such that it can be used in a HTTP Get to retrieve some data.

The code works correctly in its current state however when trying to bind the Id dynamically, as shown in other questions, the 'undefined' error occurs.

The Id needs to be defined with the directive in HTML to meet a requirement. Code follows;

Container.html

<div ng-controller="IntroSlideController as intro">
   <div intro-slide slide-id="{54BCE6D9-8710-45DD-A6E4-620563364C17}"></div>
</div>

eLearning.js

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

app.controller('IntroSlideController', ['$http', function ($http, $scope, $attrs) {
    var eLearning = this;
    this.Slide = [];
    var introSlideId = '{54BCE6D9-8710-45DD-A6E4-620563364C17}'; //Id to replace

    $http.get('/api/IntroSlide/getslide/', { params: { id: introSlideId } }).success(function (data) {
        eLearning.Slide = data;
    });
}])
    .directive('introSlide', function () {
        return {
            restrict: 'EA',
            templateUrl: '/Modules/IntroSlide.html',
            controller: 'IntroSlideController',
            link: function (scope, el, attrs, ctrl) {
                 console.log(attrs.slideId); //Id from html present here
            }
        };
    });

Are the id's hard coded? The Controller should always be the source of truth, so it should already know the id's. If it doesn't something might not be right. — Pete
– Pete, Commented Jul 3, 2014 at 15:43
The id will be hardcoded into the HTML but not the controller - this will allow the Html to define which IntroSlide will presented on it. — Jonathan Robbins
– Jonathan Robbins, Commented Jul 3, 2014 at 15:48
hmmm.... So the view becomes the source of truth? I think that breaks the point of MVC. Would it be possible to move that information to somewhere else such as a query string? Alternatively, could you hard code that value into the controller and just have it set on the view using Angular? — Pete
– Pete, Commented Jul 3, 2014 at 15:56

b0nyb0y · Accepted Answer · 2014-07-03 16:49:37Z

2

Instead of defining a controller div that wraps around a directive, a more appropriate approach is to define a controller within the directive itself. Also, by defining an isolated scope for your directive, that slide-id will be available for use automatically within directive's controller (since Angular will inject $scope values for you):

.directive('introSlide', function () {
    // here we define directive as 'A' (attribute only)
    // and 'slideId' in a scope which links to 'slide-id' in HTML
    return {
        restrict: 'A',
        scope: {
            slideId: '@'
        },
        templateUrl: '/Modules/IntroSlide.html',
        controller: function ($http, $scope, $attrs) {
            var eLearning = this;
            this.Slide = [];

            // now $scope.slideId is available for use
            $http.get('/api/IntroSlide/getslide/', { params: { id: $scope.slideId } }).success(function (data) {
                eLearning.Slide = data;
            });
        }
    };
});

Now your HTML is free from wrapping div:

<div intro-slide slide-id="{54BCE6D9-8710-45DD-A6E4-620563364C17}"></div>

In your IntroSlide.html, you probably have references that look like intro.* (since your original code use intro as a reference to controller's $scope). You will probably need to remove the intro. prefix to get this working.

answered Jul 3, 2014 at 16:49

b0nyb0y

1,4461 gold badge15 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pete Over a year ago

This is correct solution as it keeps your presentation separated from your application.

Rodrigo Fonseca · Accepted Answer · 2014-07-03 15:40:04Z

0

Require your controller inside your directive, like this:

app.directive( 'directiveOne', function () {
      return {
        controller: 'MyCtrl',
        link: function(scope, el, attr, ctrl){
           ctrl.myMethodToUpdateSomething();//use this to send/get some msg from your controller
        }
      };
    });

answered Jul 3, 2014 at 15:40

Rodrigo Fonseca

9447 silver badges21 bronze badges

Collectives™ on Stack Overflow

AngularJS accessing an attribute in a directive from a controller

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related