如何在不使用ng控制器的情况下手动向AngularJS中的元素添加控制器？_Angularjs

如何在不使用ng控制器的情况下手动向AngularJS中的元素添加控制器？

angularjs

如何在不使用ng控制器的情况下手动向AngularJS中的元素添加控制器？,angularjs,Angularjs,我想做一些类似的事情： bindACustomControllerToThisElement($('#putControllerHereWithoutDirective'), function($scope){ $scope.title = "Hello World!"; }); 你可能会想，“为什么？”。它正在将遗留代码转换为角度。还不能完全使用AngularJS的标准方法。如果您想要确切地了解您在那里所做的事情，这里是： function bindACustomControllerTo

我想做一些类似的事情：

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

你可能会想，“为什么？”。它正在将遗留代码转换为角度。还不能完全使用AngularJS的标准方法。

如果您想要确切地了解您在那里所做的事情，这里是：

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'
    };
  }
);

但是，在这个设置中共享数据可能会变得复杂，但是如果您在其他地方有名称空间的数据，您只需要绑定。我想这应该行得通。

使用指令非常简单：

<!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>


上传
{{test}}
"严格使用",；
角度.module（'app'，[]）
.指令（“mytest”，函数（）{
返回{
限制：“A”，
控制器：功能（$scope）{
$scope.test='mytest'；
},
链接：功能（范围、el、属性）{
功能测试（）{
警报（“点击”）；
}
el.on（'点击'，测试）；
}
};
});

带绑定（酷：））


上传
{{test}}
"严格使用",；
角度.module（'app'，[]）
.run（函数（$rootScope）{
var returnFn=angular.bind（$（'#putControllerHereWithoutDirective'），函数（）{
this.attr（'data-ng-controller'，'myCtrl'）；
}, []);
返回fn（）；
})
.controller（'myCtrl'，函数（$scope）{
$scope.test='我的测试'；
})

我不确定它是否符合你的需要，但这是我想到的第一件事，没有锅：）再想想，如果你能参与加价，可能是一个指令，这是解决问题的方法go@Whisher我该怎么做呢？您能否使用

bind

并作为

指令编写一些示例代码？
<!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>