Insert value into template AngularJS

Question

I have a flag I'm setting to true/false that changes the way some items are being displayed on the page. I'm running into some trouble getting the value into my template and having it actually work though. The normal HTML (not inside the template) works fine.

restrict: 'E',
        scope: {
            speedDirection: "@",
            speedName: "@",
            value: "@",
            editElements: "="
        },
        template:
        '<div>'+
          '<p class="body-text">{{speedDirection}} '+
          '<input type="text" name="{{speedName}}" value="{{value}}" ng-show="editElements">'+
          '<span ng-hide="editElements">{{value}}</span>'+
          '</p>'+
        '</div>',

I would like to use the dynamic model value of editElements though, and not just the passed through value. That way when it changed it would reflect the update in the displayed template. The variable is defined in an object where I'm storing my test data:

function MyObject($scope) {
    $scope.editElements = true;

Is there any way to get this to work? I've tried passing it through (as above), using the "@" and {{editElement}} bit and so on. The custom HTML portion:

<speed-limit speed-direction="A to B:"
                    speed-name="reverse"
                    value="{{newObject.speedLimit[0]}}"
                    editElement="editElements">
                    </speed-limit>

UPDATE: I've installed Batarang and it shows the specific portion of my custom element (speed-limit) to have "editElement: null". However the other areas editElements is referenced are correctly set. Is this some weird scope problem?

Your ng-show/hides are using editElements, which is different from what is defined in the scope: {...}, which is editElement. Do you want the directive to use a different name or the same? — Mark Rajcok
– Mark Rajcok, Commented Feb 6, 2013 at 17:26
If I didn't have to pass the editElements in through HTML like I'm doing now, then I'm ok with keeping the same name. — Organiccat
– Organiccat, Commented Feb 6, 2013 at 17:33
You can use the same name for the attribute, but you do need to pass it to the directive via HTML since you are creating an isolate scope. Try this: in the HTML, editElements="editElements"; in the directive: scope: { ..., editElements: "="}. Leave your template as is. — Mark Rajcok
– Mark Rajcok, Commented Feb 6, 2013 at 17:37
According to Chrome's developer tool, the value isn't being interpreted. It's just showing up as ng-hide="editElements" rather than ng-hide="true" — Organiccat
– Organiccat, Commented Feb 6, 2013 at 18:22
Ok, adding more details to the problem now that I've inspected with Batarang. — Organiccat
– Organiccat, Commented Feb 6, 2013 at 18:28

Mark Rajcok · Accepted Answer · 2013-02-06 18:37:26Z

2

As discussed in the comments, the same name can be used for the attribute's name, but it must be snake-case, hence edit-elements="editElements":

<speed-limit speed-direction="A to B:"
     speed-name="reverse"
     value="{{newObject.speedLimit[0]}}"
     edit-elements="editElements">
</speed-limit>

Don't feel bad about this... I think every Angular developer has wasted at least one hour (or more) of his/her life on this.

answered Feb 6, 2013 at 18:37

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

1 Comment

Organiccat Over a year ago

I submitted an issue on github, this isn't my first time running into this embarrassingly enough. I DO think Angular should throw SOME type of error. At the very least a "no such variable found" one.

Collectives™ on Stack Overflow

Insert value into template AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related