CODEWITHSUNDEEP
javascriptangularjsangularjs-components
Curtwagner1984
Curtwagner1984

Reputation: 2088

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?

Upvotes: 1

Views: 4650

Answers (1)

Suneet Bansal
Suneet Bansal

Reputation: 2702

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>

Upvotes: 2

Related Questions