Curtwagner1984 Curtwagner1984 - 1 year ago 68
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:


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="$" 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 }}
objectType="This is just a string"
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 Source

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="$" object-type="This is just a string"></async-typeahead>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download