Angular - 从视图调用函数时未定义$ scope

Question

我们有一个现有的应用程序，我想使用一些角度控制部件。

我创建了一个帮助器来将动态HTML模板绑定到angular，它执行以下操作：

AngularHelper.ShowModal = function (template, anchor, scopeProperties, controllerName) {
    var def = $.Deferred();

    var template = $.tmpl("InputPane/filterValuesSelectDialog");

    var $injector = angular.injector(["ng", "app"]);

    $injector.invoke(["$compile", "$rootScope", "$controller", function ($compile, $rootScope, $controller) {
        //  Create a new scope for the modal.
        var modalScope = $rootScope.$new();

        var inputs = {
            $scope: modalScope
        };

        var linkFn = $compile(template);
        var modalElement = linkFn(modalScope);
        inputs.$element = modalElement;

        //  Create the controller, explicitly specifying the scope to use.
        var modalController = $controller(controllerName, inputs);

        if (scopeProperties) {
            for (var inputName in scopeProperties) {
                modalScope[inputName] = scopeProperties[inputName];
            }
        }

        template.dropdown({ anchor: anchor });

        def.resolve(template);
    }]);

    return def;

}

然后，我的控制器看起来像这样：

angular.module('app').controller("testController", ['$scope', '$element', function ($scope, $element) {
  $scope.ClearAllSelection = function ()
  {

  }
}]);

每当我从我的视图中调用ClearAllSelection时，我都无法访问$ scp变量。我可以使用this来访问范围。

有什么想法吗？