Geek asks and answers

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

I would like to do something like:

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

You might think, "why?" Well. It converts legacy code to angular. I can not use the standard way to do AngularJS yet.

+3
source share
2 answers

If you want exactly what you are doing here, this 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 may just be a difficult attempt to share data in this setup. But if you have data with names in another place that you just want to associate. I suppose that should work.

+1
source

With the 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 communication (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>
+1
source

More articles:


All Articles