CODEWITHSUNDEEP
javascriptangularjs
pliguori
pliguori

Reputation: 105

angularjs: losing scope between 2 directives

I'm pretty new to AngularJS and am having some scope-losing issue in my project. I simplified the project to the minimum, in order to focus on the problem.

I'm having an "overlay" directive, which appears as a html tag in my code, that will eventually render as a popup. Inside this overlay, I'd like to have a list of various inputs, that are the "inputs" array in my model, that should render as textboxes, dropdowns, checkboxes, etc. according to a parameter named "Type" in my model. The HTML is simple as this:

<div ng-app="jsf">
    <div ng-controller="MyCtrl">
        <overlay inputs="inputs">
            <div ng-repeat="input in inputs">
                {{input.Type}}: 
                <userInput input="input">
                 </userInput>
            </div>
        </overlay>
    </div>
</div>

my directives are the following:

.directive('overlay', function () {
        return {
            restrict: 'E',
            transclude: true,
            scope: {
                inputs: '='
            },
            template: '<div>This is my overlay ...</div> <div ng-transclude></div> <div> ...my overlay has ended </div>'
        };
    })

.directive('userInput', function () {
        return {
            restrict: 'E',
            scope: {
                input: '='
            },
            template: '<div style="border: 1px solid black;">' + '<div style="background-color: gray">{{input.Parameter}}</div > ' + '</div>'
        };
    })

and the controller is just putting the values inside the "inputs" array: 

  .controller('MyCtrl', function ($scope) {

        $scope.inputs = [{
            Type: 'textbox',
            Parameter: 'myvalue'
        }, {
            Type: 'checkbox',
            Parameter: true
        }];
    });

the output of this code is:

This is my overlay ... textbox: checkbox: ...my overlay has ended

whereas I'd expect to see the input "Parameter" values just after "textbox" and "checkbox". So, my 2 questions are the following:

1) what have I done wrong in trying to inherit the scope from the overlay to the userinput directive? 2) this is something more advanced, but it's my objective: what would be the best way to dynamically render a different template for the "userinput", depending on the "Type" value of the "input" variable?

I have a JSFiddle that shows my problem here: http://jsfiddle.net/4fVkm/1/

Thanks very much in advance to anyone who'll try to help me out

Pietro

Upvotes: 0

Views: 936

Answers (2)

pliguori
pliguori

Reputation: 105

I think that this answer somehow answers my second question too, but I'd like to share it and see if anybody can come up with more structured solutions.

https://stackoverflow.com/a/10646761/1895909

For instance I'd like to keep the various templates for the input fields in separate external templates... And this 'compile' usage doesn't look to work this way...

Upvotes: 0

Langdon
Langdon

Reputation: 20063

You created a directive called userInput, but you tried using it like <userInput> when you're supposed to use it like <user-input>.

Much like how there's a directive called ngRepeat that is used like ng-repeat="x in x".

Upvotes: 1

Related Questions