个人中心
gpt4 book ai didi

javascript - Controller 内部无法访问 Angular js 输入模型

转载 作者：行者123 更新时间：2023-11-29 21:30:01 24 4
gpt4 key购买 nike

我正在使用此代码在数组中查看和添加人员。

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<body>

<h1>People</h1>

<div ng-controller="Ctrl">
    <div ng-view></div>
</div>

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>

</body>
</html>

add.html

<h1>Add</h1>

<input type="text" ng-model="new_name" placeholder="Name">
<br />
<input type="text" ng-model="new_age" placeholder="Age">

<br />
<button ng-click="add()">Add</button>

<hr />
<a href="#/">Back</a>

controller.js

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

app.config(function ($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl: 'list.html'
        })
        .when('/add',{
            templateUrl: 'add.html',

        });
});

app.controller('Ctrl', function($scope) {
    $scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
    $scope.add = function(){
        $scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
        $location.path("/");
    };
});

问题是，我没有从 ng-model="new_name" 获取数据到 Controller 方法 $scope.add = function()。按下添加按钮后，只有空白字符串被插入数组。然而，模型和 Controller 在没有路由和 ng-view 指令的情况下工作得很好。我认为它的范围相关的问题。任何人都可以帮助我吗？谢谢。

最佳答案

因为你应该为每个 View 指定 Controller 。所以尝试这样做:

app.config(function ($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl: 'list.html',
            controller: 'Ctrl'
        })
        .when('/add',{
            templateUrl: 'add.html',
            controller: 'Ctrl'
        });
});

更好的解决方案是为每个 View 设置一个单独的 Controller 。另外，看看 $routeProvider documentation .

关于javascript - Controller 内部无法访问 Angular js 输入模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36692021/

24 4 0
文章推荐： PHP SQL数据库查询错误
文章推荐： mysql - 通过分组查询得到结果
文章推荐： php - PDO 与绑定(bind) IN 运算符相关的问题
文章推荐： php - 插入获取数组数据到新数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com