Angular (1.4.7) ng-view 中的 JavaScript 不起作用

Question

I have a partial page that goes inside the ng-view and I have JS code related to nothing other than that page and so I'd like for it to be included in that page only since I only need it there and to avoid overhead in my index.html, I tried injection like using ng-bind-html that didn't work.我有一个进入 ng-view 的部分页面，我有与该页面无关的 JS 代码，所以我希望它只包含在该页面中，因为我只需要它并避免开销我的 index.html，我尝试使用ng-bind-html注入，但无效。

Here's some code to help understand what's going on.这里有一些代码可以帮助理解发生了什么。

index.html索引.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="/">

    <title>Node and Angular App</title>

    <!-- CSS -->
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- JS -->
    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-sanitize.min.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/TestCtrl.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>

</head>
<body ng-app="sampleApp">
    <div class="container">
        <nav>
            <a href="/test">Test</a>
       </nav>

        <!-- ANGULAR DYNAMIC CONTENT -->
       <div ng-view></div>
    </div>
</body>
</html>

TestCtrl.js测试控件.js

angular.module('TestCtrl', ['ngSanitize']).controller('TestController', function($scope) {

  var str = '<h1>this shows</h1><script>alert("hello")</script><h1>this doesn\'t show</h1>';

  $scope.content = function() { return str; }
});

test.html测试.html

<div class="jumbotron" ng-bind-html="content()"></div>

appRoutes.js appRoutes.js

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

  $routeProvider

  .when('/test', {
    templateUrl: 'views/test.html',
    controller: 'TestController'
  })

 $locationProvider.html5Mode(true);
}]);

app.js应用程序.js

var app = angular.module('sampleApp', ['ngRoute', 'appRoutes', 'TestCtrl']);

Answer 1

I don't fully understand your question but if you want to inject html into your view, try adding ngSanitize to the list of dependencies in your module, them you can have:我不完全理解您的问题，但如果您想将 html 注入视图，请尝试将 ngSanitize 添加到模块中的依赖项列表中，您可以拥有：

controller("mainCtrl", ['$sce', function($sce){
    //function that returns trusted html
    this.htmlStuff = function(){
        return $sce.trustAsHtml("<p>Html String</p>");
    }
}]);

then in your view, you can have那么在你看来，你可以有

<div ng-controller='mainCtrl as main'>
    <div ng-bind-html="main.htmlStuff()"></div>
</div>

if this isn't what you meant, then you have to rephrase the question如果这不是你的意思，那么你必须改写这个问题

Angular (1.4.7) ng-view 中的 JavaScript 不起作用

问题描述

1 个解决方案

解决方案1
0 2015-11-05 20:14:51

Angular (1.4.7) ng-view 中的 JavaScript 不起作用

问题描述

1 个解决方案

解决方案1 0 2015-11-05 20:14:51

解决方案1
0 2015-11-05 20:14:51