Angular JS $scope from Partials not working in index.html

Question

Sorry I have searched high and low for HOURS!!!

It is very hard to explain but basically my $scope from introController is appearing in the partial that it is connected to by route, but not appearing in the index.html file which has ng-route. I want to add a header to my index.html containing the name which is stored in $scope.name but I am really having trouble, it's probably something simple but I am absolutely stuck, I think I need somebody else to stare at the code, I've done it all day :(

(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>

Maxime Morin · Accepted Answer · 2015-02-04 01:25:50Z

2

The controller specified with your route is only scoped to the content located in the ng-view. You can read about this in the Experiments section of this tutorial.

You could create a new controller for your header, say headerController and add this controller to your header with ng-controller="headerController".

On a side note, I suggest to use the controller as syntax. It will allow you to manage different controllers and remember what's where easily. It also enable you to avoid most, if not all, prototypal inheritance masking primitives issues.

answered Feb 4, 2015 at 1:25

Maxime Morin

2,0081 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

squiroid · Accepted Answer · 2015-02-04 01:37:11Z

0

Your introController is only bounded to <div ng-view></div> for app/partials/intro.html so anything bind to $scope is only visible inside the ng-view.

Now instead of binding name with $scope bind it with $rootScope like $rootScope.name="yourname" it is available for complete application.

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

edited Feb 4, 2015 at 1:37

answered Feb 4, 2015 at 1:21

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

Collectives™ on Stack Overflow

Angular JS $scope from Partials not working in index.html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related