来自Partials的Angular JS $ scope在index.html中不起作用

Question

抱歉，我在HOURS上下搜索了！！！

很难解释，但是基本上我的introController的$ scope出现在它通过路由连接的部分中，但是没有出现在具有ng-route的index.html文件中。 我想在我的index.html中添加一个标头，其中包含存储在$ scope.name中的名称，但我确实遇到了麻烦，这可能很简单，但是我绝对会陷入困境，我想我需要其他人来盯着代码，我整天都做了：(

 (function(){ var app = angular.module('appMod', ['ngRoute', 'ngAnimate']); app.config(function ($routeProvider) { $routeProvider .when('/', { controller: 'introController', templateUrl: 'app/partials/intro.html' }) .otherwise({ redirectTo: '/' }); }); app.controller('introController', function($scope) { $scope.name = ""; $scope.formHide = ""; }); })();

 <!DOCTYPE html> <html ng-app="appMod"> <head> <link rel="stylesheet" type="text/css" href="content/css/normalize.css"> <link rel="stylesheet" type="text/css" href="content/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="content/css/style.css"> <link rel="stylesheet" type="text/css" href="content/css/animation.css"> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="scripts/bootstrap.min.js"></script> <script type="text/javascript" src="scripts/angular.min.js"></script> <script type="text/javascript" src="scripts/angular-route.min.js"></script> <script type="text/javascript" src="scripts/angular-timer.min.js"></script> <script type="text/javascript" src="scripts/angular-animate.min.js"></script> <script type="text/javascript" src="app/app.js"></script> </head> <body> <div class="container"> <div class="row"> <img src="content/images/sitelogo.png" class="logo"> <h2 class="welcomeMessage fade" ng-show="formHide == 'True'">Welcome <span class="fade" ng-show="!name == ''">{{name}}</span><span class="inline fade" ng-hide="name !== ''">Friend</span> <small>(We like to get personal!)</small></h2> </div> </div> <div ng-view></div> </body> </html>

Answer 1

您的路线指定的控制器仅适用于ng-view 。 您可以在本教程的“ 实验”部分中阅读有关此内容的信息。

您可以为标头创建一个新的控制器，例如headerController然后使用ng-controller="headerController"将其添加到标头中。

另外，我建议使用controller作为语法。 它可以让您管理不同的控制器，并轻松记住在哪里。 它还使您能够避免大多数（如果不是全部）原型继承掩盖原语的问题。

Answer 2

您的introController仅限于app / partials / intro.html的<div ng-view></div> ，因此绑定到$ scope的任何内容仅在ng-view.内部可见ng-view.

现在，不用$scope绑定名称，而是像$rootScope.name="yourname"那样将其与$rootScope绑定，它可用于完整的应用程序。

柱塞http://plnkr.co/edit/xgQ5R4N9ayV9XMCRT0GP?p=preview

来自Partials的Angular JS $ scope在index.html中不起作用

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-02-04 01:25:50

解决方案2
0 2015-02-04 01:21:53

来自Partials的Angular JS $ scope在index.html中不起作用

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-02-04 01:25:50

解决方案2 0 2015-02-04 01:21:53

解决方案1
2 已采纳 2015-02-04 01:25:50

解决方案2
0 2015-02-04 01:21:53