AngularJS directive scope property doesn't render in directive view

Question

I have a problem with scope property of directive that doesn't render want to render in directive view.

app.js

.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })

main.js

angular.module('todayfmApp')
    .controller('MainCtrl', ['$scope', function ($scope) {

        this.formsetup = [];

        this.formsetup.title = "Find Your Break";

    }]);

mainController View - where Form Setup: {{main.formsetup.title}} is rendering properly

<h2>Form Setup: {{main.formsetup.title}}</h2>
<section class="home-banner">

    <carousel-partial></carousel-partial>

    <overlay-form formsetup="main.formsetup.title"></overlay-form>

directive

angular.
    module('directives').
    directive('overlayForm', function() {
        return {
            restrict: 'E',
            scope: {
                formsetup: '='              
            },
            controller: [ '$http', '$scope',
                function OverlayFormController($http, $scope) {

                    var self = this;

                    self.getResponseData = function(){
                        $http.get('data/form-data.json').then(function(response) {
                            self.formdata = response.data;                          
                        });
                    }

                    this.logResponseData = function() {
                        console.log(self.formdata);
                    }

                    this.getResponseData();
                }
            ],
            controllerAs: 'Ctrl',
            bindToController: true,
            templateUrl: 'scripts/directives/overlay-form/overlay-form.template.html',
        };
    });

Directive View

<div class="overlay-form">
  <h3>{{formsetup.title}}</h3>

Your directive is using controllerAs binding with the name Ctrl and bindToController so your template should have Ctrl.formsetup... — Phil
– Phil, Commented Mar 5, 2017 at 23:20
Additionally to @Phil says (that's correct), you are passing to the directive just the title main.formsetup.title, not the whole object, so in your directive view <h3>{{formsetup.title}}</h3> won't work... change it to <h3>{{Ctrl.formsetup}}</h3>. For better understanding, you can rename the scope: {formsetup: '='} variable to scope: {formsetuptitle: '='}... — The.Bear
– The.Bear, Commented Mar 6, 2017 at 0:12

raja reddy · Accepted Answer · 2017-03-07 02:46:01Z

1

Problem is with template binding.It should be:(when you use controllerAs you need to refer view elements with the alias name)

<div class="overlay-form">
  <h3>{{Ctrl.formsetup.title}}</h3>
</div>

And directive HTML code should be:

<overlay-form formsetup="main.formsetup"></overlay-form>

Please check Plunker for more understanding of how it works.

edited Mar 7, 2017 at 2:46

user5874509

answered Mar 6, 2017 at 2:03

raja reddy

3822 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

AngularJS directive scope property doesn't render in directive view

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