Curtwagner1984 Curtwagner1984 - 4 months ago 9
AngularJS Question

Angularjs pass simple string to component

I'm desperately trying to pass a simple string to an AngularJS component,
I have the following angularJS component:

async-typeahead.componenet.js:

angular.module('asyncTypeahead').component('asyncTypeahead', {

templateUrl: 'static/partials/async-typeahead/async-typeahead.template.html',
bindings: {
pk: '=',
object: '=',
objectType: '@'
},
controller: ['$scope','$http',
function AsyncTypeaheadController($scope, $http) {

var self = this;


self.getTags = function (val) {
console.log("async-typeahead input is: " +val);
console.log("async-typeahead object keys are: " + angular.toJson(self.object));

console.log("async-typeahead type is: " + angular.toJson(self.objectType));...


And following html to call the component:

<async-typeahead object="$ctrl.actor.actor_tags" objectType={{ This is just a string }}></async-typeahead>


'val' is just an input from the typeahead.

I've tried
objectType={{ This is just a string }}
and
objectType="This is just a string"
and
objectType=This is just a string
I also tried changing the binding from '=' to '@' or '>' the result is the same:

whenever I look at the console I always I get:


async-typeahead input is: df

async-typeahead object kes are: [37,43,49]

async-typeahead type is: undefined


What am I doing wrong? How can I pass a simple string to an angularJS component?

Answer

Issue with objectType attribute which you have used in html. Directive/Component name and its all attributes should used as "-" delimited.

Correct code is attached below:

<async-typeahead object="$ctrl.actor.actor_tags" object-type="This is just a string"></async-typeahead>