How to define common directives in controllerAs syntax?

Question

I was reading Digging into Angular's "Controller as" syntax article. It shows below snippet to use "Controller as" syntax in directive.

app.directive('myDirective', function () {
  return {
    restrict: 'EA',
    replace: true,
    scope: true,
    template: [].join(''),
    controllerAs: '', // woohoo, nice and easy!
    controller: function () {}, // we'll instantiate this controller "as" the above name
    link: function () {}
  };
});

Here I have to set controller name controller property. Now if I want to define common directive which I want to use in multiple controllers, how can I do it?

Edit 1:

I am posting the code about what I want to achieve. In view, there is a input tag for file and when file is selected I want it's name and content type. I will use change event of input tag. I don't know how can I pass the file object to my vm. I want to use that directive which uses change event to get info about file in multiple controllers.

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="/myCtrl.js"></script>
</head>

<body ng-controller="MyController as vm">
    <input name="file" type="file" file />
    <input type="button" ng-click="vm.upload(vm.file);" value="Upload" />
</body>
</html>

myCtrl.js

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

app.controller('MyController', MyController);

MyController.$inject = ['$http'];

function MyController($http) {
    var vm = this;

    vm.file = null;
    vm.upload = function(file) {
      $http.post('/upload', { filename: file.name, contentType: file.type })
        .success(function(resp) {
            console.log(resp);
        })
        .error(function(resp) {
            console.log(resp);
        });
    }
}

app.directive('file', function() {
  return {
    restrict: 'AE',
    scope: true,
    controllerAs: 'vm',
    link: function(scope, el, attrs){
      el.bind('change', function(event){
        var files = event.target.files;
        var file = files[0];

        // What to write here to pass file object into vm ?

        // Below line is for that controller design which uses $scope service. But I am using controllerAs syntax
        // scope.file = file;
        // scope.$apply();
      });
    }
  };
});

score 0 · Answer 1 · answered Sep 07 '16 at 11:16

0

very good article about it please read http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html

answered Sep 07 '16 at 11:16

Michal Kucaj

681
5
15

RIYAJ KHAN · Answer 2 · 2016-09-08T07:53:31.393

If you want to share the multiple controller with single directive definition,then defined the directive with no controller (optional).

IMP : define the directive with scope: true or leave it with default scope but don't define isolated scope. This will allow the directive to inherit the method and property defined in parent controller.

And place the directive inside ng-controller directive in template.

controller 1:

<div ng-controller='ctrl1">

  <my-directive></my-directive>
<div>

controller 2 :

<div ng-controller='ctrl2">

  <my-directive></my-directive>
<div>

nth the way.

EDIT1 :

In controller (MyController) : you can use $broadcast

vm.upload = function(fileObj){

    $rootScope.$broadcast('sending-file-object',{data:fileObj})
}

Will receive in all others controller using $on ,

$scope.$on('sending-file-object',function(event,data){
  console.log(data) // here you get data;
})

How to define common directives in controllerAs syntax?

2 Answers2