Umbraco 7 自定义部分编辑器，将控制器定义从视图移动到单独的文件答案

【问题标题】：Umbraco 7 custom section editor, move controller deftination from view to separate fileUmbraco 7 自定义部分编辑器，将控制器定义从视图移动到单独的文件
【发布时间】：2015-01-08 03:04:26
【问题描述】：

我为 Umbraco 7 后端创建了新的自定义部分。现在我已经使用代码创建了 edit.html 文件属性编辑器用途：

<script type="text/javascript">
function CustomSectionEditController($scope, $log, $routeParams) {
    $scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }] };

    $scope.EditMode = function () {
        $log.warn($routeParams);
        return $routeParams.create == 'true';
    };
}
</script>

<div ng-controller="CustomSectionEditController">
    <umb-panel>
        <umb-header tabs="content.tabs">
            <div class="umb-headline-editor-wrapper span12 ng-scope">
                <h1 class="ng-binding">My custom section {{id}}</h1>
            </div>
        </umb-header>

        <umb-tab-view>
            <umb-tab id="tab1" rel="svensson">

                <div class="umb-pane">
                    This is tab content for tab 1<br />
                    <p ng-show="EditMode()">
                        <span class="label label-warning">In create mode, this label is only showed when the controller sees the create-querystring item.</span>
                    </p>
                </div>
            </umb-tab>

            <umb-tab id="tab2" rel="kalle">

                <div class="umb-pane">

                    This is tab content for tab 2
                </div>
            </umb-tab>

        </umb-tab-view>
    </umb-panel>

</div>

它运作良好，但我想将业务逻辑从视图移动到单独的文件。我试图将 JS 代码移动到单独的文件中，并像这样链接到它：

<script type="text/javascript" src="Controllers/StoreEditController.js"></script>

而且 Angular 不想将我的控制器注入到应用程序中。如何将控制器移动到单独的文件并在我的视图中链接到这个文件？有可能吗？

请原谅我的英语。问候，安东

【问题讨论】：

标签： angularjs umbraco umbraco7 custom-sections

【解决方案1】：

不久前我刚刚在 Umbraco 7 中做了同样的事情。你的 JS 文件是什么样的？我的猜测是，您没有像这样在单独的 js 文件中将控制器添加到“umbraco”应用程序中。

    angular.module("umbraco").controller("CustomSectionEditController",
        function ($scope, $log, $routeParams) {
                $scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }] };
                $scope.EditMode = function () {
                     $log.warn($routeParams);
                     return $routeParams.create == 'true';
                };
          }
     });

另外，请务必在您的 package.manifest 中包含这个新的 js 文件。

我希望这就是你要找的东西！

【讨论】：

【解决方案2】：

确保使用最小化安全语法进行依赖注入。

angular.module("umbraco")
  .controller("ExampleController",
  ['$scope', '$log', function($scope, $log) {
    //do some stuff
  }]);

另外，直接在 App_Plugins/YourPlugin/ 下添加一个 package.manifest 文件，内容如下：

{   
    //array of files we want to inject into the application on app_start
    javascript: [
        '~/App_Plugins/YourPlugin/path/to/jsfile.js'
    ]
}

这是我发现的最好的例子：

UkFest-AngularJS-Demo

【讨论】：