angular.js - 关于 angular 几个问题
过去多啦不再A梦
过去多啦不再A梦 2017-05-15 16:52:56
0
2
512

现有 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梦

reply all(2)
巴扎黑

I don’t quite understand what you mean by cross-domain communication? Could it be communication between controllers? And trigger?

1. Just write ng-bind directly without using data-* like this
2. <title> 所在的controller是和 main这个控制器平级的。你可以在他们之外加一个父控制器,然后mainController.$scope.$parent.title = post.title, or use $rootScope directly (not recommended). You can also do this via $emit/$broadcast/$on but it's not necessary.
Then:

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

3. Use angular highlight as the keyword to search for some good highlighting plug-ins on github. bower install of
4. Don’t use window.setTimeout, use $timeout() provided by angular. It will return a promise.
5. In fact, a better way to solve the second problem is to use $resource.get().$promise.then(); // or $http service to ensure that the remote data is loaded before execution.

Ty80

Add a class wtitle to the title element in the template that renders the article, and the title of the current page will be changed to the title of the article.
You can also do it in WeChat~

The function of wtitle is to set the content of element.text() as document.title. The purpose of using iframe is to make it effective in the webview of the app

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);
      }
    };
  }
]);
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!