Question

我正在尝试处理angularjs指令。我有一个示例，我返回了苏格兰威士忌的名称和价格。如果我硬编码答案，它工作正常。但是，我无法评估角度表达式。我的意思是{{scotch.name}}。我知道该值不是空的，但我不确定为什么它没有显示，因为没有错误消息。

这是示例应用

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

         .state('home', {
             url: '/home',
             views : {
                 'indexView@' :{
                     templateUrl: '/Home/home'
                 }
                 }

         })

    // nested list with custom controller
    .state('home.list', {
        url: '/list',
        views : {
            'indexView@' : {
                templateUrl: '/Home/List',
                controller: function ($scope) {
                    $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
                }
            }
        }
    })

    // nested list with just some random string data
    .state('home.paragraph', {
        url: '/paragraph',
        views : {
            'indexView@' :{
                template: 'I could sure use a drink right now.'
            }
        }
    })
     .state('about', {
         url: '/about',
         views: {

             // the main template will be placed here (relatively named)
             'indexView@': { templateUrl: '/Home/About' },

             // the child views will be defined here (absolutely named)
             'columnOne@about': { template: 'Look I am a column!' },

             // for column two, we'll define a separate controller 
             'columnTwo@about': {
                 templateUrl: '/Home/data',
                 controller: 'scotchController'
             }
         }

     })
        .state('Account', {
            url: '/Account',
            views: {
                'indexView@': { templateUrl: '/Account/myAccount' },
                // '': { templateUrl: '/Home/About' },
                'view1@Account': {
                    templateUrl: '/Navigation/Header',
                    controller: function ($scope) {
                        $scope.username = 'user1';
                        console.log($urlRouterProvider);
                    }
                },
                'view2@Account': {
                    templateUrl: '/Account/Login',
                    controller: 'accountController'
                }
            }
        })
    .state('Account.User', {
        url: '/User',
        views: {
            'view1@Account': {
                templateUrl: '/Navigation/AuthenticateHeader',
                controller: function ($scope) {
                    $scope.message = 'User Logged in.';
                    console.log($urlRouterProvider);
                }
            },
            'view2@Account': {
                templateUrl: '/User/CurrentUser',
                controller: 'userController'
            }
        }
    });

});


routerApp.controller('userController', function ($scope, $state) {
    $scope.message = 'User Logged in.';
});

routerApp.controller('accountController', function ($scope, $state) {

    $scope.login = function () {
        $state.go('Account.User');
    };

});


routerApp.controller('scotchController', function ($scope,$state) {

    $scope.message = 'test';
    $scope.scotch = {
        name: 'Macallan12',
        price: 50
    }
    $scope.scotches = [
        {
            name: 'Macallan 12',
            price: 50
        },
        {
            name: 'Chivas Regal Royal Salute',
            price: 10000
        },
        {
            name: 'Glenfiddich 1937',
            price: 20000
        }
    ];

    $state.go('Account');

});

routerApp.directive('mySharedScope', function () {
    return {
        template: 'Name: {{ scotch.name }} <br /> Price: {{ scotch.price }}'
    };
});

预期结果的页面

<div my-shared-scope></div>
<ul>
    <li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>

显示的页面：名称：价钱：但是期望值是Macallan12的名称和50的价格和

$scope.scotch = {
        name: 'Macallan12',
        price: 50
    }

Answer 1

删除你的路由器东西，它工作正常：http://jsfiddle.net/xwr3Ln3d/

看看你的scotchController，你正在做$state.go()。删除它并再次测试。

AngularJS指令不评估表达式

1 个答案: