相关疑难解决方法(0)

从数据库编译动态HTML字符串

情况

嵌套在我们的Angular应用程序中的是一个名为Page的指令,由一个控制器支持,该控制器包含一个带有ng-bind-html-unsafe属性的div.这被分配给名为'pageContent'的$ scope var.此var从数据库中分配动态生成的HTML.当用户翻转到下一页时,会调用DB,并将pageContent var设置为这个新的HTML,它将通过ng-bind-html-unsafe在屏幕上呈现.这是代码:

页面指​​令

angular.module('myApp.directives')
    .directive('myPage', function ($compile) {

        return {
            templateUrl: 'page.html',
            restrict: 'E',
            compile: function compile(element, attrs, transclude) {
                // does nothing currently
                return {
                    pre: function preLink(scope, element, attrs, controller) {
                        // does nothing currently
                    },
                    post: function postLink(scope, element, attrs, controller) {
                        // does nothing currently
                    }
                }
            }
        };
    });
Run Code Online (Sandbox Code Playgroud)

Page指令的模板(上面的templateUrl属性中的"page.html")

<div ng-controller="PageCtrl" >
   ...
   <!-- dynamic page content written into the div below -->
   <div ng-bind-html-unsafe="pageContent" >
   ...
</div>
Run Code Online (Sandbox Code Playgroud)

页面控制器

angular.module('myApp') …
Run Code Online (Sandbox Code Playgroud)

html dom compilation dynamic angularjs

131
推荐指数
3
解决办法
16万
查看次数

AngularJS中的部分视图

我是Angular的新手,非常感谢任何建议.基本上,我有一对多的关系 - 一个Category有几个Product,我有布局页面,我呈现不同的部分视图:

<div class="mainContent">
     <ng-view></ng-view>
</div>
Run Code Online (Sandbox Code Playgroud)

我的第一个视图显示了类别列表,当单击其中一个时,我会显示第二个视图,它分为两部分:类别列表和特定类别的产品列表,示意图如下所示:

在此输入图像描述

我的问题是我无法弄清楚如何使用另一个部分产品列表,因为想要将它们保存在单独的.html中.

我配置了路线:

app.config(function($routeProvider, $locationProvider) {
$routeProvider
    .when('/category', {
        templateUrl: 'category.html',
        controller: 'categoryController as catCtrl'
    })
    .when('/category/:id', {
        templateUrl: 'categoryDetail.html',
        controller: 'categoryDetailController as catDetailCtrl'
    })       
    .when('/product/:category_id', {
        templateUrl: 'product.html',
        controller: 'productController as productCtrl'
    })
    .otherwise({
        redirectTo: "/category"
    });
});
Run Code Online (Sandbox Code Playgroud)

和控制器:

app.controller("categoryController", function($http)
{
    var vm = this;
    vm.categories = somedata;
});
app.controller("categoryDetailController", function($http, $routeParams)
{
   var vm = this;
   vm.category = somedata;//current category from REST …
Run Code Online (Sandbox Code Playgroud)

html javascript angularjs angular-routing

16
推荐指数
1
解决办法
2万
查看次数