在Rails 4中加载Wiselinks页面后，Angular没有加载

时间：2017-01-21 22:23:01

标签： javascript jquery ruby-on-rails angularjs wiselinks

我遇到的问题是，当通过Wiselinks加载已设置Angular的页面时，我会看到实际的Angular变量而不是正确的值（例如{{song.name}}而不是这首歌的名字。

但是，当我刷新页面时，Angular会正确显示。

看起来问题是网站最初加载后文档已经准备就绪。

然后当您单击Wiselinks链接时，Wiselinks只会加载指定div中的内容，这意味着在文档就绪时触发的事件不会再次触发，而angular将不会引导。

我见过几个解决方案，但我没有运气。

其中一个是使用页面：始终在Wiselinks中使用功能，并在通过Wiselinks加载页面时手动引导角度。

但是，当将以下代码添加到与要加载的页面对应的控制器时，我无法看到以下代码执行：

var page_init;

$(document).ready(function() {
  return page_init();
});

$(document).off('page:always').on('page:always', function(event, xhr, settings) {
  return page_init();
});

page_init = function() {
 angular.bootstrap(document);
};

即使我更换＆＃39; angular.bootstrap（文件）;＆＃39;警告（＆＃34;测试！＆＃34;）;＆＃39;代码仍然不会触发。

我应该将此代码放在视图的相应角度控制器中吗？

此外，这是通过Wiselinks加载页面后引导角度的正确方法。

我已经阅读了文档，并且看过类似的StackOverflow问题，但我对jQuery并不是很熟悉，所以它对我来说就像希腊文一样。

我的代码如下：

AtmoDashboardCtrl.js：

(function (){
  function AtmoDashboardCtrl($resource, ModalService, $interval, Restangular, ShareMusic, angularSoundManager) {

    //CV: atmo_dashboard.html.erb

    var page_init;
    $(document).ready(function() {
      return page_init();
    });
    $(document).off('page:always').on('page:always', function(event, xhr, settings) {
      return page_init();
    });
    page_init = function() {
      return alert("test!");
    };

    var currentUserDiv = document.getElementById('div-atmodashboarduser-data');
    var currentUserId = currentUserDiv.getAttribute("data-atmodashboarduser-id");

    ShareMusic.sayHello();

    var vm = this;


    // SAVING SONG TO PLAYLIST

    vm.setSong = function(songId){
      ShareMusic.setSong(songId);
    };

    // SAVE SONG TO LIBRARY - LIBRARY ID, SONG ID

    vm.saveSongToLibrary = function(selectedSongId) {
      ShareMusic.saveSongToLibrary(selectedSongId);
    };

    // SHARE SONG - CREATE POST, CREATE POST_SONG
    vm.sharePostSong = function(songId) {
      ShareMusic.sharePostSong(songId);
    };

  }
  angular
      .module('AtmoDashboardCtrl', ['angularModalService', 'ShareMusic', 'angularSoundManager'])
      .controller('AtmoDashboardCtrl', ['$resource', 'ModalService', '$interval', 'Restangular', 'ShareMusic', AtmoDashboardCtrl]);
})();

atmo_dashboard.html.erb：

<div ng-controller="AtmoDashboardCtrl as dash">
  <div id="div-atmodashboarduser-data" data-atmodashboarduser-id="<%= current_user.id %>"></div>
  <div class="row">
    <div class="column column-4" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;">
      <h3>Atmo Schedule</h3>
      <%= render partial: 'atmo_events/atmo_events' %>
    </div>
    <div class="column column-4" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;">
      <h3>Atmo Artists</h3>
      <% @atmo_artists.each do |atmo_artist| %>
        <p><%= atmo_artist.user.name %></p>
      <% end %>
    </div>
    <div class="column column-4" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;">
      <h3>Atmo Charts</h3>
      <div>
        <div class="topartist" style="cursor:pointer" ng-repeat="song in searchSongs | orderBy:'-rank'">
          <a music-player="play" add-song="song">{{ song.name }}</a>
          <a style="cursor:pointer;" music-player add-song="song"><img src="/assets/plus_2.png"/></a>
          <a style="cursor:pointer;" ng-click="dash.setSong(song.id);"><img src="/assets/add_list.png"/></a>
          <button ng-click="dash.saveSongToLibrary(song.id);">LIB +</button>
          <button ng-click="dash.sharePostSong(song.id);">Share Song</button>
          <strong>{{ song.rank }}</strong>
          <a rel="nofollow" data-method="post" ng-href="/songs/{{song.id}}/up-vote"><img src="/assets/vote_arrows/up_arrow.png" alt="Up arrow"></a>
          <a rel="nofollow" data-method="post" ng-href="/songs/{{song.id}}/down-vote"><img src="/assets/vote_arrows/down_arrow.png" alt="Down arrow"></a>
          <br>
        </div>
      </div>
    </div>
  </div>
  <div class="row" style="margin-top: 15px;">
    <div class="column column-8" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;"><%= link_to "Store", products_path, data: { push: true } %>/Radio/<%= link_to "Contests", contests_path, data: { push: true } %>/Blogs&News</div>
    <div class="column column-4" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;">
      <h3>Channel/Youtube</h3>
    </div>
  </div>
<div>

更新：

所以我发现在我的atmo_dashboard.html.erb文件中将我的代码更改为以下内容（并从我的index.html.erb文件中移除ng-app =＆＃34;氛围＆＃34;）成功手动启动视图加载时我的角度应用程序。

<div id="dash">
  <div ng-controller="AtmoDashboardCtrl as dash">
    <div id="div-atmodashboarduser-data" data-atmodashboarduser-id="<%= current_user.id %>"></div>
    <div class="row">
      <div class="column column-4" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;">
        <h3>Atmo Schedule</h3>
        <%= render partial: 'atmo_events/atmo_events' %>
      </div>
      <div class="column column-4" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;">
        <h3>Atmo Artists</h3>
        <% @atmo_artists.each do |atmo_artist| %>
          <p><%= atmo_artist.user.name %></p>
        <% end %>
      </div>
      <div class="column column-4" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;">
        <h3>Atmo Charts</h3>
        <div>
          <div class="topartist" style="cursor:pointer" ng-repeat="song in searchSongs | orderBy:'-rank'">
            <a music-player="play" add-song="song">{{ song.name }}</a>
            <a style="cursor:pointer;" music-player add-song="song"><img src="/assets/plus_2.png"/></a>
            <a style="cursor:pointer;" ng-click="dash.setSong(song.id);"><img src="/assets/add_list.png"/></a>
            <button ng-click="dash.saveSongToLibrary(song.id);">LIB +</button>
            <button ng-click="dash.sharePostSong(song.id);">Share Song</button>
            <strong>{{ song.rank }}</strong>
            <a rel="nofollow" data-method="post" ng-href="/songs/{{song.id}}/up-vote"><img src="/assets/vote_arrows/up_arrow.png" alt="Up arrow"></a>
            <a rel="nofollow" data-method="post" ng-href="/songs/{{song.id}}/down-vote"><img src="/assets/vote_arrows/down_arrow.png" alt="Down arrow"></a>
            <br>
          </div>
        </div>
      </div>
    </div>
    <div class="row" style="margin-top: 15px;">
      <div class="column column-8" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;"><%= link_to "Store", products_path, data: { push: true } %>/Radio/<%= link_to "Contests", contests_path, data: { push: true } %>/Blogs&News</div>
      <div class="column column-4" style="height: 90px; background-color:rgba(255,255,255,0.1); border-radius:5px;">
        <h3>Channel/Youtube</h3>
      </div>
    </div>
  </div>
</div>
<script>
  console.log("Hello from Dashboard Load INIT");
  angular.bootstrap(document.getElementById('dash'), ['atmosphere']);
</script>

现在的问题是我的应用程序只能被引导一次，现在我可以在我的视图中访问角度，但不能在我的索引文件中访问。

因此，看起来我需要在加载Wiselinks页面后手动初始化控制器。

这可能吗？如果没有，有没有办法两次引导同一个应用程序？经过一些研究，它看起来不像是两次自举，所以我认为初始化控制器是最好的选择。

有什么想法吗？或许是一个更好的解决方案？

提前致谢！

0 个答案:

没有答案
相关问题
最新问题