简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - 關於 angular 幾個問題
过去多啦不再A梦
过去多啦不再A梦 2017-05-15 16:52:56
0
2
507

現有 angularjs 問題兩枚

一.
透過 $http 載入了一篇文章,該文章有標題, 現想實現文章加載後將文章標題替換掉瀏覽器標題. html 結構如下

<!doctype html>
<html data-ng-app="app">
<head data-ng-controller="head">
 <meta charset="utf-8"/>
 <titlte data-ng-bind="title||'Document'"></title>
</head>
<body>
 <p data-ng-controller="main">
  <button data-ng-click="getPost()">GET POST</button>
  <p data-ng-module="post">
   <h2 data-ng-bind="post.title"></h2>
   <article data-ng-bind="post.content"></article>
  </p>
 </p>
</body>
</html>

也就是 post 載入後瀏覽器標題和 post.title 顯示一樣.
已搜尋過跨域通信的解決方案, 並且看到了這裡(AngularJS控制器controller如何通信？) , 這三種方法, 前倆種併部適合我當前這個結構, 因此使用第三種方式, 並且也是實現了同步, 但是致命的是需要透過一個觸發(點擊等)才能夠同步, so 其實直白了就是想問怎麼能夠自動同步而不是透過觸發來同步.

二.
$scope 回調,
還拿這個加載文章來說, 比如加載的文章中有pre 標籤包裹的代碼快, 在加載後, 要通過其他庫來實現高亮, so 需要在數據綁定並且渲染完畢後來執行高亮操作. 但是並沒有搜到什麼解決方案.
自己也寫了些, 倆中方案
第一種:
資料綁定後以後遞歸查詢當前頁面的所有 pre 標籤, 找到後或限定次數後 高亮 結束.
第二種:
window.setTimeout(function(){}, 1000);
倆中結果了, 第一種是不行的. 無論遞歸多少次都無法找到 pre 標籤
第二種可行, 不過感覺這不是一個好的解決方案

过去多啦不再A梦
过去多啦不再A梦

全部回覆(2)
巴扎黑
巴扎黑2017-05-15 16:54:56 2樓

沒太看懂你說的跨域通訊？難不成是controller之間通訊？ 還有 觸發？

1、 直接寫 ng-bind 就行 不用data-* 這樣
2、 <title> 所在的controller是和 main这个控制器平级的。你可以在他们之外加一个父控制器，然后mainController.$scope.$parent.title = post.title， 或直接用$rootScope (不怎麼推薦)。也可以透過$emit/$broadcast/$on 這樣來做 不過沒什麼必要了。
然後：

<title ng-bind="$parent.title||'Default Title'"></title>

3、 以 angular highlight為關鍵字可以在github搜到一些不錯的高亮插件。 bower install 之
4. 不要用window.setTimeout， 用angular提供的 $timeout() 它會回傳一個promise。
5. 其實對於第二個問題更好的方法是使用 $resource.get().$promise.then(); // 或 $http服務，確保遠端資料載入完成後才執行。

點贊 +0
新增回覆
Ty80
Ty802017-05-15 16:54:56 1樓

在渲染文章的模板裡面比如標題那個元素上加一個 class wtitle, 就會把當前頁面的title改成文章的標題.
在微信裡面也可以做到~

這個wtitle的作用, 就是把element.text()的內容作為document.title來設定. 使用iframe的作用是為了使得在app的webview中也能夠生效

javascriptapp.directive('wtitle', [
  '$timeout',
  '$document',
  function($timeout, $document){
    return {
      restrict: 'AC',
      link: function($scope, $element, $attrs){
        var watch = $scope.$watch(function(){
          return $element.text().replace(/(^\s*)|(\s*$)/g, '');
        }, function(title){
          // 空标题不显示
          if(/^\s*$/.test(title)){
            return;
          }
          $document[0].title = title;
          var $body = angular.element($document[0].body);
          var $iframe = angular.element('

<iframe style="visibility:hidden;" src="/path/to/iframe.png"></iframe>

');
          $iframe.on('load', function(){
            $timeout(function(){
              $iframe.off('load').remove();
            }, 5);
          });
          $body.append($iframe);
        });

        $scope.$on('$destroy', watch);
      }
    };
  }
]);
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！