Question

我创建了控制器和html页面。

'use strict';
angular.module('myApp.view3', ['ngRoute'])

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/view3', {
            templateUrl: 'view3/view3.html',
            controller: 'View3Ctrl'
        });
    }])

    .controller('View3Ctrl', [function($scope) {
        $scope.my_name = "Pasha";
    }]);

这是我的html页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My view</title>
</head>
<body>
<p> Hello Pavel</p>
<div>{{my_name}}</div>
</body>
</html>

我想在浏览器中显示我的HTML。

Hello Pavel

Pasha

Angular seed app: v0.1

但我在浏览器中看到

 Hello Pavel
 {{my_name}}   
 Angular seed app: v0.1

我使用link

中的示例编辑：我添加了appjs。

这是我的app js文件我的文件是我的文件：

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.view3',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

Answer 1

将ng-app和ng-controller添加到您的身体
在控制器中添加'$ scope'

'use strict';
angular.module('myApp.view3', [])

    .controller('View3Ctrl', ['$scope', function($scope) {
        $scope.my_name = "Pasha";
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My view</title>
</head>
<body ng-app="myApp.view3" ng-controller="View3Ctrl">
<p> Hello Pavel</p>
<div>{{my_name}}</div>
</body>
</html>

Answer 2

<强> HTML

<div ng-controller="View3Ctrl as ctrl">{{ ctrl.my_name}}</div>

您还需要设置文档ng-app属性。请参阅docs。

中的详情

如何从控制器到html页面显示变量（AngularJs）

2 个答案: