2017-10-23 1 views
0

컨트롤러에서 선언 된 범위 변수를 가져올 수 없습니다.

내 Index.html을

<body ng-app="myApp" ng-controller="homingController" ng-cloak> 
<script type="text/javascript"> 
    angular.module('myApp' ['ngRoute','ngMaterial']).controller('homingController', ['$scope', 

    function($scope){ 
     $scope.message = 'Hello'; 
    } 
    ]).config(function ($routeProvider) { 
    $routeProvider.when("/home", { 
     templateUrl: "home.html", 
     controller: "homingController" 
    }).when("/monitor", { 
     templateUrl: "monitor.html", 
     controller: "monitoringController" 
    }).otherwise({ 
     redirectTo: '/home' 
    }); 
}).controller('monitoringController', function ($scope) { 
    $scope.message = "Monitor"; 
}); 
</script> 

<nav class = "navbar navbar-inverse" role="navigation"> 
    <ul class = "nav navbar-nav" > 
     <li ><a href="#!/home" class = "active" ui-sref= "home" style="margin: 0px 1px 0px 19px"><img src="./images/home.svg">Home</a></li> 
     <li ><a href="#!/monitor" class = "active" ui-sref = "monitor" ><img src="./images/monitor.svg">Monitor</a></li> 
     <li ><a class = "active" ui-sref = "Audit" ><img src="./images/audit.svg">Audit</a></li> 
     <li ><a class = "active" ui-sref = "configuration" ><img src="./images/configure.svg">Configure</a></li> 
    </ul> 
</nav> 
</div> 
</body> 
<div ng-view></div> 

내 home.html을

{{ message}} 
/*This line giving error in console : angular.js:14328 ReferenceError: $scope is not defined 
*/ 

나는 여기에 놓치고 있나요 대신 나는 아래 reference error : message is not defined

내 코드입니다 받고 있어요?

+0

예 ... 문제를 재현하는 [mcve]가 누락되었습니다 – charlietfl

+0

무엇을 추가해야합니까? – CodeWithCoffee

+0

당신의'angular.js' 스크립트는 어디에 있습니까 –

답변

1

<div ng-view></div><body> 태그 안에 있어야합니다. 애플 리케이션을 정의하는 바디 바깥에 배치함으로써 뷰는 어떤 앱이나 컨트롤러를 사용해야하는지 전혀 알지 못한다.

당신은 또한 당신의 routeconfig에서 그들을 정의하기 때문에, 어디서나 뷰 주위 ng-controller 년대를 식별 할 필요가 없습니다

: 당신이 당신의 컨트롤러 중 하나에서 뭔가를 표시하려면

var app = angular.module('myApp' ['ngRoute']); 

app.config(function($routeProvider) { 
    $routeProvider 
    .when("/home", { 
     templateUrl: "home.html", 
     controller: "homingController" 
    }).when("/monitor", { 
     templateUrl: "monitor.html", 
     controller: "monitoringController" 
    }).otherwise({ 
     redirectTo: '/home' 
    }); 
}); 

app.controller('homingController', function($scope) { 
    $scope.message = 'Hello'; 
}) 

app.controller('monitoringController', function($scope) { 
    $scope.message = "Monitor"; 
}); 

당신이 그것을 정의해야 그래서 같은 :

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
</head> 

<body ng-app="myApp"> 

    <div ng-controller="homingController"> 
    {{message}} 
    </div> 

    <nav class="navbar navbar-inverse" role="navigation"> 
    <ul class="nav navbar-nav"> 
     <li> 
     <a href="#!/home">Home</a> 
     </li> 
     <li> 
     <a href="#!/monitor">Monitor</a> 
     </li> 
    </ul> 
    </nav> 

    <div ng-view></div> 

</body> 

당신의 home.html & monitor.html{{ message }}을 포함로. 이에 대한 정확한 예는 w3Schools ("컨트롤러"제목 아래)에서 찾을 수 있습니다. 빌드 한 다음, 나머지 작업을 완료하기 위해 작업 확장을 시작해야합니다.

관련 문제