使用 ng-view 失去角度模块之间的范围答案

【问题标题】：Losing scope between angular modules using ng-view使用 ng-view 失去角度模块之间的范围
【发布时间】：2017-09-19 22:14:12
【问题描述】：

当我尝试抽象我的 Angularjs 模块时，我似乎失去了我的角度控制器的范围。

如果我使用我的 app 模块，它可以正常工作，但是一旦我将 home.js 模块更改为 app.layout，$scope 就不再工作了。

有人可以在这里发现问题吗？

_Layout.html（省略包含和头部）

<body class="docs-body" ng-app="app">
<div layout="column" ng-cloak>
    <section layout="row" flex>
        <div ng-include="'App/layout/sidenav.html'"></div>
        <md-content class="_md layout-column flex" layout="column" flex="">
            <div ng-include="'App/layout/toolbar.html'"></div>
            <div class="container body-content">
                @RenderBody()
            </div>
        </md-content>
    </section>
</div>
</body>

@RenderBody() 调出 Index.html

<!-- this is where content will be injected -->
<div ng-view></div>

主页.html

<div>
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>

我的 app.js

angular.
.module('app', [
        'app.core',
        'app.layout',
    ]);

})();

layout.module.js

(function () {
'use strict';

angular.module('app.layout', [
    'ngAnimate',
    'ngMaterial',
    'ngAria'
]);

})();

core.module.js

(function () {
'use strict';

angular.module('app.core', [
    'ngRoute'
]);

})();

和 route.js：

angular.module('app.core')
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider

        // route for the home page
        .when('/', {
            templateUrl: 'App/layout/home.html',
            controller: 'home'
        });// End routeprovider
    })// end config

最后是罪魁祸首... Home.js

(function () {
'use strict';

console.log('registering controller home before Angular');

angular
    .module('app.layout')
    .controller('home', home);

home.$inject = ['$scope']; 

function home($scope) {
    console.log('registering controller home');
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
}

})();

现在，当我有的时候

.module('app);
.controller('home', home);

在 home.js 上，$scope.message 显示

'Everyone come and see how good I look!'

但如果我有

.module('app.layout')
.controller('home', home);

它显示

{{message}}

我知道我在这里不知何故失去了范围，但我不知道如何解决它！我需要在路由器之外再次声明控制器吗？

【问题讨论】：

标签： angularjs scope ng-view

【解决方案1】：

我认为 Angular 无法获取您的 home 控制器。您应该在app.core 模块中注入app.layout。

  angular.module('app.core', ['app.layout'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider

        // route for the home page
        .when('/', {
            templateUrl: 'App/layout/home.html',
            controller: 'home'
        });// End routeprovider
    })// end config


angular.
.module('app.layout',[]).controller();

【讨论】：

我尝试将 app.layout 注入核心模块，但在我调试时它仍然无法构建控制器。我也尝试将核心注入布局，但它仍然没有构建它。它似乎无法访问家庭控制器，但我仍在尝试找出模块之间的依赖关系以及如何在每个模块之间访问其他模块。
表示名称为“home”的控制器未注册，看看它如何构建它是有道理的
angular.module('app.layout',[]).controller();
这个解决方案确实有效。但是，通过这种方式，我知道它在 home.js 中构建模块。我有几个需要使用 app.layout 的控制器。我之前没有包含我应该拥有的模块实例化文件。进一步挖掘，似乎当我尝试构建控制器时，它找不到模块，这就是为什么在那里再次构建模块有效，但这样做会破坏其他控制器模块。我会继续挖掘。
更新您的完整代码结构。每个人都能理解你的问题

【解决方案2】：

解决方案相当令人沮丧。使用 Visual Studio 的 Bundle 配置，它在编译模块文件之前添加了 home.js 文件。这样做时，当它尝试构建和注册控制器时，它找不到模块。解决方案是先构建所有模块，然后通过在捆绑配置中指定构建顺序来构建控制器。

【讨论】：