How to manually add a controller to an element in AngularJS without using ng-controller?

Question

I'd like to do something like:

bindACustomControllerToThisElement($('#putControllerHereWithoutDirective'), function($scope){
  $scope.title = "Hello World!";
});

You might wonder, "why??" Well. It's transforming legacy code to angular. Cannot quite use the standard way of doing AngularJS yet.

I'm not sure if it fits yourneeds but it's the first thing I think of no pan :) docs.angularjs.org/api/angular.bind on second thoughts if you can put hand in the mark up may be a directive is the way to go — Whisher
– Whisher, Commented Feb 8, 2014 at 21:49
@Whisher how would I go about that? Could you write some sample code using the bind and also as a directive? — JC JC
– JC JC, Commented Feb 8, 2014 at 21:52

calebboyd · Accepted Answer · 2014-02-08 22:03:24Z

1

If you want exactly what you're doing there here it is:

function bindACustomControllerToThisElement(elem,ctrlName,ctrl,deps){
  var name = elem.id || elem.attr && elem.attr('id') || false;
  if(!name) return false;
  angular.module(name,deps || []).directive('has'+ctrlName,function(){
    return {
      restrict:'C',
      controller: ctrlName
    };
  }).controller(ctrlName,ctrl);
  angular.bootstrap(elem,[name]);
}

//calling it...

var elem = document.getElementById('myAngularSection');

bindACustomControllerToThisElement(elem,'MyCtrl',function($scope){
    $scope.model = {
      message: 'Hello World'
    };
  }
);

plunker

It just might get complicated trying to share data in this setup though But if your have namespaced data elsewhere you just want to bind. I suppose this should work.

answered Feb 8, 2014 at 22:03

calebboyd

5,7332 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Whisher · Accepted Answer · 2014-02-08 22:25:54Z

With a directive is quite simple:

<!DOCTYPE html>
<html data-ng-app="app">
    <head>
        <title>Upload</title>
    </head>
    <body>
        <div id="putControllerHereWithoutDirective" data-mytest>
            {{test}}
        </div>  

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        <script>
            'use strict';

            angular.module('app',[])

                .directive("mytest", function () {
                return {
                    restrict: 'A',
                    controller: function ($scope) {
                        $scope.test = 'mytest';
                    },
                    link: function (scope, el, attrs) {

                    function test() {
                        alert('Clicked');

                    }
                    el.on('click', test);
                }
                };
            });
       </script>
    </body>
</html>

with bind (cool :) )

<!DOCTYPE html>
<html data-ng-app="app">
    <head>
        <title>Upload</title>
    </head>
    <body>
        <div id="putControllerHereWithoutDirective">
            {{test}}
        </div>  
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        <script>
            'use strict';
            angular.module('app',[])
            .run( function($rootScope) {
                var returnFn  = angular.bind($('#putControllerHereWithoutDirective'),function(){
                    this.attr('data-ng-controller','myCtrl');
                }, []);
                returnFn();
            })
            .controller('myCtrl',function($scope){
                $scope.test = 'My test';
            })



       </script>
    </body>
</html>

Collectives™ on Stack Overflow

How to manually add a controller to an element in AngularJS without using ng-controller?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related