Using directive to access service values directly

Question

Using directive to access service values directly

I am in need of utilizing a directive to fetch and display data using ng-repeat from a service.

The anticipated result will be

<ul>Days
<li>Monday</li>
<li>Tuesday</li>
...
<ul>
<ul>Month
<li>January</li>
<li>February</li>
...
<ul>

I have set up a jsFiddle for this purpose.

http://jsfiddle.net/alaksandarjesus/upzayfv1/8/

Unfortunately, the directive is not being called in my jsFiddle. However, the message "I am from directive" is being displayed on my localhost. Running the jsFiddle will provide a better insight into my issue.

javascript angularjs angularjs-directive angularjs-service

Answer 1

Answer №1

Consider narrowing the scope of your directive to "Element" for better performance:

return {
        restrict: 'E',
        template:"adsf"
    }

Answer 2

Consider narrowing the scope of your directive to "Element" for better performance:

return {
        restrict: 'E',
        template:"adsf"
    }

Answer 3

Answer №2

I suggest not injecting the service into your directive. Allowing the controller to determine the directive's data provides more flexibility. Here are my suggested changes.

Updated View:

<my-days weeks="daysListWeeks"></my-days>

Controller Update:

myapp.controller("daysController",function($scope,daysList){

    $scope.test = "I am from the controller";
    $scope.daysListWeeks = daysList.weeks();
    console.log(daysList.weeks());
});

Directive Adjustments:

myapp.directive("myDays",function(){

    return {
        restrict: 'E',
        scope: { weeks: '='},
        template:"<ul><li ng-repeat='m in weeks'>{{m}}</li></ul>"
    }

});

Answer 4

I suggest not injecting the service into your directive. Allowing the controller to determine the directive's data provides more flexibility. Here are my suggested changes.

Updated View:

<my-days weeks="daysListWeeks"></my-days>

Controller Update:

myapp.controller("daysController",function($scope,daysList){

    $scope.test = "I am from the controller";
    $scope.daysListWeeks = daysList.weeks();
    console.log(daysList.weeks());
});

Directive Adjustments:

myapp.directive("myDays",function(){

    return {
        restrict: 'E',
        scope: { weeks: '='},
        template:"<ul><li ng-repeat='m in weeks'>{{m}}</li></ul>"
    }

});

Answer 5

Answer №3

If you want to implement a directive, you can use the following code snippet. By including daysList in your directive function, you will have access to the service within the directive. Then, within the link function of the directive, you can call the service function and assign the values to the scope.

Directive

 myapp.directive("myDays",function(daysList){
    return {
        restrict: 'E',
        template:'<div ng-repeat="day in daysList">{{day}}</div>',
        link: function(scope, element, attrs){
            console.log(daysList)
           scope.daysList = daysList.weeks().days;
        }
    }
});

JSFiddle

Answer 6

If you want to implement a directive, you can use the following code snippet. By including daysList in your directive function, you will have access to the service within the directive. Then, within the link function of the directive, you can call the service function and assign the values to the scope.

Directive

 myapp.directive("myDays",function(daysList){
    return {
        restrict: 'E',
        template:'<div ng-repeat="day in daysList">{{day}}</div>',
        link: function(scope, element, attrs){
            console.log(daysList)
           scope.daysList = daysList.weeks().days;
        }
    }
});

JSFiddle

Using directive to access service values directly

Answer №1

Answer №2

Answer №3

Similar questions

What causes the menu icon to shift to the left upon clicking it?

How can I remove the focus highlight from the MUI DatePicker while retaining it for the TextField?

Cross-origin resource sharing (CORS) policy issue arises when the 'Access-Control-Allow-Origin' header is not included in the requested resource, especially when utilizing an iframe in a React

Resolving issues with setting up d3.js in the 'Creating a Custom Map' guide

The command "actions" in Selenium is not recognized

Is combining Passport.js Google authentication with JWT a logical choice?

Is there a way to automatically fill up a second dropdown menu based on the user's selection from the first dropdown

Is it possible to execute in a specific context using npm?

Is it possible for Jaydata relationships to function seamlessly without the need to be

Upon pressing the browser's back button, the page fails to automatically load with the updated URL

Unable to associate Slider values with TextFields in MaterialUI

Manipulating latitude and longitude variables from Javascript Geolocation in an ASP.NET environment

What is the process of utilizing an npm package as a plain JavaScript library through require and module export?

Error with Expression Engine: PHP function cannot be executed

How can I integrate custom PHP pages into Odoo Community 12?

Customize the month template of the Kendo datepicker calendar popup in an AngularJS application

Which specific event(s) are triggered when transitioning to a sticky state in ui.router?

Displaying tab content in AngularJS from a dynamic array

Guide on navigating through various HTML pages with distinct parameters using Node.js (Express server)

What is the process for including a task in the current method?