Jade中Angular.JS中$ scope的问题

Question

我是Angular JS的新手，我正在尝试实施this example from the Angular documentation。

但是，pre元素中没有任何内容呈现。甚至没有空的花括号。 我犯了错误吗？或者我需要为Jade考虑一些特殊的东西吗？

layout.jade

doctype html
html(ng-app)
    head
        meta(charset="utf-8")
        meta(http-equiv="X-UA-Compatible" content="IE=edge")
        title SpaceLab
        meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
        link(rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon")
        link(rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css")
        link(rel="stylesheet" href="/stylesheets/font-awesome.min.css")
        link(rel="stylesheet" href="/stylesheets/animate.css")
        link(rel="stylesheet" href="/stylesheets/main.css")
        link(rel="stylesheet" href="/plugins/jvectormap/css/jquery-jvectormap-1.2.2.css")
        link(rel="stylesheet" href="/plugins/todo/css/todos.css")
        link(rel="stylesheet" href="/plugins/morris/css/morris.css")
        link(href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css')
        link(href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css')
        script(src="/javascripts/modernizr-2.6.2.min.js")

    body
        section#container
            header#header
                .brand
                    a(href="index.html" class="logo" style="padding-left: 22px;")
                        | <span>Fit</span>Essentials
                .toggle-navigation.toggle-left
                    button(type="button" class="btn btn-default" id="toggle-left" data-toggle="tooltip" data-placement="right" title="Toggle Navigation")
                        i.fa.fa-bars
                .user-nav
                    ul
                        li.profile-photo
                            img(src="/images/avatar.jpeg" class="img-circle")
                        li.dropdown.settings
                            a(class="dropdown-toggle" data-toggle="dropdown" href="#")
                                | Drew Wyatt <i class="fa fa-angle-down"></i>
                            ul.dropdown-menu.animated.fadeInDown
                                li
                                    a(href="#")
                                        | <i class="fa fa-user"></i> Profile
                                li
                                    a(href="#")
                                        | <i class="fa fa-calendar"></i> Calendar
                                li
                                    a(href="#")
                                        | <i class="fa fa-power-off"></i> Logout
            aside.sidebar
                div(id="leftside-navigation" class="nano")
                    include navigation.jade
            section.main-content-wrapper
                section#main-content
                    block content
        script(src="/javascripts/jquery-1.10.2.min.js")
        script(src="/javascripts/angular.js")
        script(src="/plugins/bootstrap/js/bootstrap.min.js")
        script(src="/plugins/waypoints/waypoints.min.js")
        script(src="/plugins/nanoScroller/jquery.nanoscroller.min.js")
        script(src="/javascripts/application.js")
        script(src="/plugins/countTo/jquery.countTo.js")
        script(src="/plugins/weather/js/skycons.js")
        script(src="/plugins/jvectormap/js/jquery-jvectormap-1.2.2.min.js")
        script(src="/plugins/jvectormap/js/jquery-jvectormap-world-mill-en.js")
        script(src="/plugins/todo/js/todos.js")
        script.
            $(document).ready(function() {
                app.timer();
                app.map();
                app.weather();
            });

用户-form.jade

extends layout

block content
    .row
        .col-md-12
            div(ng-controller="Controller")
                form(novalidate class="user-form")
                    | Name  
                    input(type="text" ng-model="user.name")
                    | <br /><br />
                    | Email &nbsp;
                    input(type="text" ng-model="user.email")
                    | <br /><br />
                    button(ng-click="reset()") Reset
                    button(ng-click="update(user)") Save
                    | <br /><br />
    .row
        .col-md-12
            pre
                | form = {{ user | json }}
            pre
                | master = {{ master | json }}
    script. 
        function Controller($scope) {
            $scope.master = {};

            $scope.update = function(user) {
                $scope.master = angular.copy(user);
            };

            $scope.reset = function() {
                $scope.user = angular.copy($scope.master);
            };

            $scope.reset();
        }

Answer 1

问题是pre元素的范围是包含(ng-controller= "controller")的div。通过重构我的观点，我能够解决问题：

extends layout

block content

    .row(ng-controller="Controller")
        .col-md-12
            div
                form(novalidate class="user-form")
                    | Name  
                    input(type="text" ng-model="user.name")
                    | <br /><br />
                    | Email &nbsp;
                    input(type="text" ng-model="user.email")
                    | <br /><br />
                    button(ng-click="reset()") Reset
                    button(ng-click="update(user)") Save
                    | <br /><br />
        .col-md-12
            pre
                | form = {{ user | json }}
            pre
                | master = {{ master | json }}
    script. 
        function Controller($scope) {
            $scope.master = {};

            $scope.update = function(user) {
                $scope.master = angular.copy(user);
            };

            $scope.reset = function() {
                $scope.user = angular.copy($scope.master);
            };

            $scope.reset();
        }