CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Eswar Rajesh Pinapala
Eswar Rajesh Pinapala

Reputation: 4911

Unable to get Dynamic templates working in Angular directive

I am trying to write a small angular app that has 3 modes. QA, Production and Sandbox. QA is something that has multiple buttons, so that user cans select any value he wants and populates "myModel". The other 2 modes, Production and sandbox have buttons beside them to apply the previously selected Qa value(from myModel, using the sync function).

I am using different templates for QA (multiple buttons) and Production,Sandbox(single button to sync from QA- mymodel.) I am able to render the QA/Production template fine but the QA template(listof buttons) doesn't show up at all.

I am guessing there is something wrong wiht the way compile is happenign for the list of buttons.

Please see my code at : http://jsbin.com/sutipo/1/watch?html,js,output

HTML & Directive I am using to dynamically pickup templates is below :

    <tr>
        <td> <strong>Production : </strong>  </td>
        <td> {{types.production.text}} </td>
        <td><app-typedisplay env="production" status="non-base"></app-typedisplay></td>
    </tr>
    <tr>
        <td> <strong>SandBox : </strong>  </td>
        <td> {{types.sandbox.text}}  </td>
        <td><app-typedisplay env="sandbox" status="non-base"></app-typedisplay></td>
    </tr>
    <tr>
        <td><strong>QA : </strong>
        <td> {{types.qa.text}}  </td>
        <td><app-typedisplay env="qa" status="base"></app-typedisplay></td>
    </tr>

And the directive :

app.directive('appTypedisplay', function ($compile) {

    var getTemplate = function (content) {
        var template = '';
        var base = "<button type='button' class='btn btn-default' " +
            "ng-class='{active: option.text == model.text}'" +
            "ng-repeat='option in options' " +
            "ng-click='activate(option)'>{{option.text}} " +
            "</button>";

        var non_base = "<td> <button " +
            'ng-click=\'sync("' + content.env + '")\'>' +
            "Sync to " + content.env + "</button> </td>";

        switch (content.status) {
            case 'base':
                template = base;
                break;
            case 'non-base':
                template = non_base;
                break;
        }

        return template;
    };

    var linker = function (scope, element, attrs) {
        element.html(getTemplate(attrs));
        $compile(element.contents())(scope);
    };

    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
            env: '='
        },
        controller: function ($scope) {
            $scope.activate = function (option) {
                $scope.model = option;
            };
        },
        link: linker
    };
});

Angular newbie here, Can some one please help me understand why the list of buttons template is not being compiled properly?

expected output should look like something below :

enter image description here

Upvotes: 1

Views: 90

Answers (1)

Austin Greco
Austin Greco

Reputation: 33544

You defined some attributes to pass into your directive's isolate scope, but never passed the actual model references:

<app-typedisplay env="qa" status="base" options="options" model="myModel"></app-typedisplay>

The isolate scope directive doesn't know anything about a parent's scope, so all data used must be explicitly passed in through attributes

Upvotes: 1

Related Questions