angular 1简单路由 - 数据绑定不起作用

8 浏览
0 Comments

angular 1简单路由 - 数据绑定不起作用

我正在使用Angular 1将表单中的数据绑定到下一个视图,使用路由模块来显示来自不同文件的HTML结构。当所有HTML代码都在一个文件中时,原型工作得很完美,但是当我使用路由模块时,数据不会通过链接进行绑定。

在下面的链接中,我只使用CSS进行过渡效果,所以所有的HTML都在一个文件中,而不使用路由模块,那里可以正常工作 http://jspmultimedia.com/angular-cv-css/#form

而在下一个链接中,使用了路由模块,无法将表单中的数据传递到下一个视图中显示。

http://jspmultimedia.com/angular-cv-route/#!/form

var app = angular.module("myApp", ["ngRoute"]);
//用于显示和URL的路由
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        controller : 'myCtrl',
        templateUrl : 'dashboard.htm'
    })
    .when("/form", {
        controller : 'myCtrl',
        templateUrl : 'form.htm'    
    })
    .when("/result", {
        controller : 'myCtrl',
        templateUrl : 'resultdashboard.htm'
    })                      
    .otherwise({ redirectTo: 'dashboard.htm'});
});
//选择列表的作用域(职位)
app.controller('myCtrl', function($scope) {
    $scope.position = [
        "前端Web开发人员",
        "后端Web开发人员",
        "UI / UE设计师"
    ]
    //添加技能
    $scope.skills = [];
    $scope.addItem = function () {
        $scope.skills.push($scope.addMe);
    }
    //删除技能
    $scope.removeItem = function (x) {
        $scope.skills.splice(x, 1);
    }  
});

这是form.htm的内容


  • {{x}} ×
your image 完成

最后是resultdashboard.htm的内容


            photo image of {{name + 
            

{{ name + " " +lastName}}

{{shortDescription}} 申请职位:

{{selectedPosition}}

主要技能

  • {{x}}

我想我可能在控制器方面漏掉了什么,如果有人能快速查看一下,请告诉我,我会非常感激。这个原型应该是一个用于学习如何使用Angular 1的简历上传,然后再使用其他库,我认为理解路由是我迈出的一大步。无论如何,谢谢。

0
0 Comments

问题原因:没有在HTML中添加控制器。

解决方法:在HTML中添加控制器。

代码示例:


  

0