单位信息系统

Question

我对角度相对较新，我似乎无法理解为什么我的代码无法正常工作，部分主页放在home.html文件中，我从ng-route中加载。该函数似乎工作正常，但当我尝试将代码变量放在html文件中时，该变量不会显示。

然而，当我将整个代码放在主html文件中并执行相同的函数时，程序打印出变量就好了。有人可以帮助我吗？

单位信息系统

<!--home.html-->
<div ng-controller="More_info">
<div data-ng-init = "unitObj=
                    [{code:'ICT10001', desc:'Problem Solving with ICT', cp:12.5, type:'Core'},
                    {code:'COS10005', desc:'Web Development', cp:12.5, type:'Core'},
                    {code:'INF10003', desc:'Introduction to Business Information Systems', cp:12.5, type:'Core'},
                    {code:'INF10002', desc:'Database Analysis and Design', cp:12.5, type:'Core'},
                    {code:'COS10009', desc:'Introduction to Programming', cp:12.5, type:'Core'},
                    {code:'INF30029', desc:'Information Technology Project Management', cp:12.5, type:'Core'},
                    {code:'ICT30005', desc:'Professional Issues in Information Technology', cp:12.5, type:'Core'},
                    {code:'ICT30001', desc:'Information Technology Project', cp:12.5, type:'Core'}] ">

                <!--    <div data-ng-repeat="x in unitObj||"x">
                        <p data-ng-show="inputStr==x.code">{{x.desc}}</p>
                        <p data-ng-show="descStr==x.desc">-->
                <table class = "table table-striped">
                    <tr>
                        <th>Code</th>
                        <th>Description</th>
                        <th>More info</th>
                    </tr>

                    <tr ng-repeat = "x in unitObj|filter:filterObj">

                        <td>{{x.code}}</td>
                        <td>{{x.desc}}</td>
                        <td><a href ="#" ng-click="more_info(x);">show details</a></td>

                    </tr>

                </table>

    </div>
    {{Code}}
</div>

文件的角度部分

var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
    $routeProvider
        .when('/home',{
        templateUrl:'view/home.html',
        controller:'More_info'
    })
        .when('/directory',{
          templateUrl:'view/directory.html',
          controller:'Contorol'
          })
    .otherwise({
        redirectTo:'/home'
    })
}]);

app.controller("More_info", function($scope)
{
    $scope.more_info = function(x)
    {
        alert("This is working!")
        $scope.Code=x.code;
        $scope.Desc=x.desc;
        $scope.Credit =x.cp;
        $scope.Type = x.type;
    }

}
              );

HTML主文件

<body class ="container">
   <ul style ="list-style-type:none; ">
        <li style ="display:inline"><a href="#!/home">Home</a></li>
       <li style ="display:inline"><a href = "#!/directory">Directory</a></li>

    </ul>

    <main ng-view>  

    </main>

Answer 1

确保app.config中路由配置中的templteUrl个目录，然后问题将自动解决。

更新：在没有路由目的的情况下使用a标记时，请使用href而不传递任何字符串。所以请使用它：

<a href="" ng-click="clickFunc()">Click</a>或

<a href ng-click="clickFunc()">Click</a>或更好：

<a href="javascript:void(0)" ng-click="clickFunc()">Click</a>

（实际上，出于此目的，您可以使用任何所需样式的span /按钮）

<强> Working Plunker Example

角度路由链接代码但代码不起作用

单位信息系统

1 个答案: