使用 ng-view 在 angular 个模块之间丢失范围

Question

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

如果我使用我的应用程序模块，它工作正常，但是一旦我将 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>

Home.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}}

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

Answer 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();

Answer 2

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

使用 ng-view 在 angular 个模块之间丢失范围

Losing scope between angular modules using ng-view

angularjs

scope

ng-view