angular.js - Several questions about angular
过去多啦不再A梦
过去多啦不再A梦 2017-05-15 16:52:56
0
2
577

There are two existing angularjs problems

1.
An article is loaded through $http. The article has a title. Now I want to replace the browser title with the article title after the article is loaded. The html structure is as follows

<!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>

That is, after the post is loaded, the browser title and post.title are displayed the same.
I have searched for cross-domain communication solutions and saw this (How do AngularJS controllers communicate?). Of these three methods, the first two are not suitable for my current structure, so I use the third method and implement it. synchronization, but the fatal thing is that it needs to be synchronized through a trigger (click, etc.), so in fact, I just want to ask how to synchronize automatically instead of synchronizing through a trigger.

2.
$scope callback,
Take this loading article as an example. For example, the loaded article contains code wrapped in a pre tag. After loading, other libraries need to be used to implement highlighting, so the highlighting operation needs to be performed after the data is bound and rendered. However, I didn’t find any solutions.
I also wrote some myself, and I got the best of both worlds
The first type:
After data binding, recursively query all pre tags of the current page, and highlight them after they are found or after a limited number of times.
The second type:
window.setTimeout(function(){}, 1000);
The result of both methods is that the first one doesn’t work. No matter how many times we recurse, we can’t find the pre tag
The second option is possible, but I don’t think it’s a good solution

过去多啦不再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