Directive Isolate Scope 1.2.2

Question

I'm working with Angular version 1.2.2 for the first time and trying to make a simple directive that uses isolate scope with '=' binding to pass in an object. I've done this a few times before so I'm wondering if maybe there was a change in 1.2.2 that changed this?

Here is my directive:

.directive('vendorSelector', function (VendorFactory) { return { restrict: 'E', replace: true, scope: { vendorId: '=' }, template: '<select ng-model="vendorId" ng-options="id for id in vendorIds">' + '<option value="">-- choose vendor --</option>' + '</select>', link: function (scope, element, attrs) { VendorFactory.getVendorIds().then(function(result) { scope.vendorIds = result; }); } } })

My HTML template using the directive is as follows:

<div class="padding"> <vendor-selector vendorId="someValue"></vendor-selector> {{ someValue }} </div>

And the backing controller:

.controller('AddProductController', function($scope, ProductFactory, AlertFactory) { $scope.vendorId = 0; $scope.someValue = undefined; })

I've tried using both $scope.someValue and $scope.vendorId as the supplied object in the html template. In both cases the error I'm getting back is Expression 'undefined' used with directive 'vendorSelector' is non-assignable!. Am I missing something obvious that is preventing these values from being 2-way bound in the isolate scope?

KayakDave · Accepted Answer · 2013-12-05 01:52:51Z

3

In your html:

<vendor-selector vendorId="someValue"></vendor-selector>

Change vendorId="someValue"

to vendor-id="someValue"

HTML attributes are case insensitive so to avoid confusion Angular converts all camel cased variables (vendorId) to snake case attributes (vendor-id).

So someValue wasn't bound to vendorId. Resulting in vendorId being undefined in the template. And thus your error.

answered Dec 5, 2013 at 1:52

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

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

3 Comments

Jesse Carter Over a year ago

Thank you! You are a gentleman and a scholar. I should have known better as I had appropriately changed the directive name for the camelCase just completely missed the attribute :P

KayakDave Over a year ago

There have been a bunch of changes in 1.2, including ones related to isolate scope, so I totally relate to your thinking going there. You're very welcome!

jpsimons Over a year ago

There have been a ton of changes: Namely, it works! (Doesn't take over the scope of non-isolate directives on the same element.) Also, linking priority is in reverse order.

Collectives™ on Stack Overflow

Directive Isolate Scope 1.2.2

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related