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
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:
3. Use
angular highlight
as the keyword to search for some good highlighting plug-ins on github. bower install of4. 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.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