CODEWITHSUNDEEP
angularjs
Ramin
Ramin

Reputation: 87

pass data from directive to controller

how is it possible to bind a variable inside a controller to a ng-model of an input tag inside a directive in angular?

here is the code im working on which is not working: inside directive html:

<input kendo-auto-complete k-data-source="data" ng-model="myValue"  style="width: 100%;" />

my directive script:

 app.directive('myAutocomplete', function () {
    return {
        restrict: 'E',
        scope: {
            data: '=info',
           }
        templateUrl: '/directive.html',
        transclude: true,
        link: link,
        controller:function() {
            var a = 4;
        }
    };

calling the directive somewhere else:

    <my-autocomplete info="vm.people"  ng-hide="dialogIsHidden"></my-autocomplete>{{myValue}}

Upvotes: 1

Views: 2651

Answers (1)

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

You have errors in the code you've showed, for example you are missing a comma after the scope property and you seem to be referencing a function link which you either haven't written or you're hiding it from us.

It looks like you are trying to use an isolate scope to share data between the controller and directive where you have data two-way bound between the directive and controller. I think this is probably the way to go but you haven't quite implemented it correctly due to some of the errors above.

Here's a simplified demo of what (I think) you are trying to achieve.

DEMO

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  var vm = this;

  vm.someData = {
    value: 'bar'
  };

});


app.directive('myAutocomplete', [function(){

    return {

        restrict: 'E',

        scope: {
            someData: '=',
        },

        templateUrl: 'directive.html',


    };

}]);

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as vm">
    <pre>{{vm.someData}}</pre>
     <my-autocomplete some-data='vm.someData'></my-autocomplete>
  </body>

</html>

directive.html

<input 
  type="text"
  ng-model="someData.value"  
/>

Upvotes: 2

Related Questions