javascript - 带有 UI 路由和主详细信息的 AngularJS

标签 javascript angularjs

我正在尝试从我的服务器获取 JSON 数据并将其显示到我的网站中。我正在使用 Ui 路由器扩展。我在这里寻找的是主从设置。

Index.html

<input ng-model="manga.name" ng-change="searchManga()" id="search" type="search" placeholder="Manga İsmi Girin..." required>
<div class="row" ui-view="viewA">
        <div class="col s8 offset-s1"  ng-controller = "nbgCtrl">
        <div class="row">
        <div class="col s12 m6 l4" ng-repeat = "manga in mangas">
        <div class="row">
        <div class="col s5">
            <a ui-sref="ui-sref="#/manga/{{manga.id}}"" class="thumbnail">
            <img src="/kapaklar/{{manga.kapak}}">
            </a>
        </div>
        <div class="col s7">
        <p>{{manga.ad}}</p>
        <a href="" class="waves-effect waves-light btn">
        </a>

我上面有一个主页并重复一些缩略图。每个缩略图都链接到其详细信息页面。当单击缩略图时,它必须携带自己的数据并将其加载到此处。这是我到目前为止所得到的:

JS:

angular.module('nasuh',["ui.router"])
.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state('list', {
url: "/",
controller: "ListCtrl",
templateUrl: "index.html",
}
)
$stateProvider
.state('icerik', {
url: "/icerik/:{{mangaid}}",
controller: "mmgCtrl",
views: {
"viewA": { templateUrl: "icerik.html" },
}
}
)
})
.factory('Mangas', function($http){
var factory = {};
function getData(manganame, callbak) {
var url = '/uzak/remote.php?callback=JSON_CALLBACK';
$http.get(url).success(function(data){
 factory = data.results;
 callback(data.results);
 })
 }
 return {
 list: getData,
 find: function(name, callback) {
 console.log(name);
 var manga = cachedData.filter(function(entry) {
 return entry.id == name;
 })[0];
 callback(manga);
 }
 };
 })
.controller('ListCtrl', function($scope, $http, Mangas) {
 $scope.manga = {
 name: '' }
 $scope.searchManga = function() {
 Mangas.list($scope.manga.name, function(mangas) {
 $scope.mangas = mangas;
 });
 }
 })
.controller('mmgCtrl', function($scope, $http, $stateParams, Mangas) {
Mangas.find($stateParams.mangaid, function(manga) {
 $scope.manga = manga;
 });
 })

最佳答案

我只是怀疑 getData 不是您返回的解析闭包中的 promise MY.isimler.then 所以在 mmgCtrl Controller 第一个控制台 getData 以确保它是 promise 或数据

关于javascript - 带有 UI 路由和主详细信息的 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30770391/

相关文章:

javascript - 缩放时如何更新轴上的刻度值?

javascript - 如何创建指令模块名称的隔离范围?

javascript - AngularJS:如何在 routeChangeStart 事件中更改位置路径?

angularjs - 将文件上传到 s3 服务器时出错(请使用 AWS4-HMAC-SHA256)

javascript - Razor 渲染问题

javascript - 在 .eslintrc.js 文件中使用 export default 而不是 module.exports

javascript - 在 Semantic-ui-react 中禁用搜索元素

javascript - 在 JavaScript 游戏中组织类

javascript - Angular 1.5。 |单击子组件从父组件调用函数?

javascript - Angular ng-repeat with 指令(在级联重复表中)