Material: md-chips: Can't interpolate: {{$mdChipsCtrl.getPlaceholder()}}

Created on 4 Jun 2015  Â·  14Comments  Â·  Source: angular/material

Hi,

I'm trying to use md-chips on my project, but it's not working. I am using the default template from the docs :

   <md-chips ng-model="tags"></md-chips>

and on the controller side I have defined tag as an array with two elements :

var tags = ['test', 'test2'];

Here's the error I'm getting:
capture d ecran 2015-06-04 a 12 34 22

and here's the result I'm getting :

capture d ecran 2015-06-04 a 12 39 24

I have tried to add a placeholder, updated to master branch and then back to 0.9.4, nothing is working.

Any ideas ?

Most helpful comment

To fix this, you can use ng-init directive to instantiate with an empty value:

<md-chips ng-init="tags = []" ng-model="tags"></md-chips>

See: https://docs.angularjs.org/api/ng/directive/ngInit

All 14 comments

I'm running into the same problem and can't figure out why. Modules I am pulling in, in case it helps: 'ui.router', 'ngMessages', 'ngMaterial', 'ngMaterialDropmenu', 'flow', 'ui.date', 'config', 'xeditable', 'ui.calendar', 'ui.date', 'base64', 'config', 'ui.bootstrap', 'restangular', 'angularFileUpload'

It seems that It was my mistake, I wasn't assigning tags to the scope ! @JackForbes can you check if you are doing the same thing ?

Thanks @yelqandili1 it is odd to me that the model has to be instantiated beforehand because that isn't the case for any other input types. Working now nonetheless!

I initiated the tags but it still doesn't work for me... same error

Did you check that you have an ng-model on your md-chips + that your ng-model is instantiated and that it is an array ?

@yelqandili1 Hi. I finally managed to make it work.
I instantiated the ng-model in my parent controller but that didn't matter as the compile and link function of the md-chip directive is run before the containing controller so my ng-model is undefined anyway.
The way I managed to fix it was by manually $compile-ing the md-chip directive inside my parent controller after the ng-model was instantiated.
Hope this answer might help another poor soul seeking a solution :P

I had the same problem but after I put
$scope.tags = [];
inside my controller and it works

Same error for me. Concretely, I have an async operation that fetch the model. The md-chips keep crashing until the model is fetched...

Exactly you have to initialize your array so that it works properly !
On 29 Feb 2016 14:48, "Julien Polo" [email protected] wrote:

Same error for me. Concretely, I have an async operation that fetch the
model. The md-chips keep crashing until the model is fetched...

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/3119#issuecomment-190241375.

This isn't an ideal error tho!

To fix this, you can use ng-init directive to instantiate with an empty value:

<md-chips ng-init="tags = []" ng-model="tags"></md-chips>

See: https://docs.angularjs.org/api/ng/directive/ngInit

Might be a little complicated when you have something like: $scope.someObject.Tags

my md-chips can work, but these red error logs in console really make me crazy.
(my ng-model get from server)
any advice?

I think initializing you're ng-model with an empty array would work (don't
override it if what comes from the server isn't an array)

Cordialement,

Yassine ELQANDILI
Consultant en Systèmes d'information
http://ma.linkedin.com/in/yassineelqandili

2016-09-27 11:54 GMT+01:00 Christopher.Wang [email protected]:

my md-chips can work, but these red error logs in console really make me
crazy.
(my ng-model get from server)
any advice?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/3119#issuecomment-249831996,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACBIoBEsNhHL4vOXeGbcxG9CSmhjvOv7ks5quPXjgaJpZM4E4ETV
.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Dona278 picture Dona278  Â·  3Comments

rdantonio picture rdantonio  Â·  3Comments

diogodomanski picture diogodomanski  Â·  3Comments

WebTechnolog picture WebTechnolog  Â·  3Comments

robertmesserle picture robertmesserle  Â·  3Comments