Question

我是AngularJS的新手，我想使用一些javascript库，在本例中是砌体库。它工作正常，但我不能在部分html文件中使用它，它不再起作用。哪里有问题或我该怎么办？我发现我必须在AngularJS文件之前添加jQuery，但我已经拥有它，但仍然没有。这就是我所拥有的：

的index.html

<body ng-app="clientApp">


<!-- Add your site or application content here -->
<div class="header">

</div>

<div class="container">
    <div ng-view=""></div>
</div>



<script src="scripts/masonry.pkgd.min.js"></script> <-- this does not work in ng-view

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/restangular/dist/restangular.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>

main.html中

<h1>Masonry - columnWidth</h1>
<div class="masonry js-masonry"  data-masonry-options='{ "columnWidth": 60 }'>
    <div class="item"></div>
    <div class="item w2 h2"></div>
    <div class="item h3"></div>
    <div class="item h2"></div>
    <div class="item w3"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item w2 h3"></div>
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item w2 h2"></div>
    <div class="item w2"></div>
    <div class="item"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item h3"></div>
    <div class="item h2"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item h2"></div>
</div>

app.js

angular
    .module('clientApp', [
        'ngRoute',
        'restangular'
    ])
    .config(function ($routeProvider, RestangularProvider) {

        RestangularProvider.setBaseUrl('http://localhost:3000');

        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    })
    .factory('MovieRestangular', function (Restangular) {
        return Restangular.withConfig(function (RestangularConfigurer) {
            RestangularConfigurer.setRestangularFields({
                id: '_id'
            });
        });
    })
    .factory('Movie', function(MovieRestangular) {
        return MovieRestangular.service('movie');
    });

和main.js

angular.module('clientApp')
  .controller('MainCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

AngularJS - 在ng-view中加载javascript

0 个答案: