2

我一直在试验 AngularJS，我不得不说谷歌已经超越了自己。我的意思是，数据操作是一件轻而易举的事，而 Angular 也不是很难学。现在，我只是在浏览 Angular 的源代码。

当我想将默认{{}}胡须更改为其他东西时，我出于必要而开始这样做，因为我使用的是 django。

现在，我想做其他事情，即如何更改 AngularJS 视图的 javaScript 中控制器的默认名称。我知道这听起来有点令人困惑，所以让我用一个例子来解释一下：

<html ng-app>
    <div ng-controller="Controller">
        <input type="text" ng-model="name">
        <h1>{{ name }}</h1>
        <h1> {{ age }}</h1>
    </div>

    <script>
        var Controller = function  ($scope) {
            $scope.name = "Happy Person";
            $scope.age = "30";
        };
    </script>
</html>

现在，如您所见，如果您将其命名为ng-controlleras Controller，那么您必须将控制器命名为相同。这很棒，但我想要的是，对于每个名字，都是预先设置的。例如，在这种情况下，ng-controller被称为Controller，这很好，我希望 Angular 做的是搜索ang_<controller name>。因此，例如，在这种情况下，角度将搜索ang_Controller而不是Controller.

您将如何实现这一点，您将更改代码的哪些部分？这似乎是一件愚蠢的事情，但我想这样做是为了更好地理解 Angular 源代码是如何工作的，以及如何根据自己的喜好来操作它。

4

1 回答 1

1

首先，如果让您烦恼的是使用全局变量，请注意您根本不会被迫这样做。对于大型应用程序，最好使用该controller()方法（如文档所建议的那样）：

angular
    .module('MyModule')
    .controller(
        'MyController',
        [
            '$scope',
            function ($scope) {
                // ...
            }
        ]
    );

无论如何，恕我直言，最好的方法是创建自己的指令，例如prependingController. 它的唯一目标是定义经典ngController指令，但要使用正确的前缀。当然，您将为此使用 AngularJS 常量（文档）：

angular
    .module('MyModule')
    .directive(
        'prependingController',
        [
            'CONTROLLER_PREFIX',
            '$compile',
            function (CONTROLLER_PREFIX, $compile) {
                return {
                    link : function ($scope, element) {
                        element
                            .attr(
                                'ng-controller',
                                CONTROLLER_PREFIX + element.attr('prepending-controller')
                            )
                            .removeAttr('prepending-controller');

                        $compile(element)($scope);
                    },
                };
            }
        ]
    );

Fiddle

于 2013-08-01T16:54:10.310 回答