CODEWITHSUNDEEP
javascripthtmlangularjs
Organiccat
Organiccat

Reputation: 5651

Insert value into template AngularJS

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?

Upvotes: 0

Views: 876

Answers (1)

Mark Rajcok
Mark Rajcok

Reputation: 364677

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.

Upvotes: 2

Related Questions