我有一个简单的 google-chrome 扩展应用程序。我正在使用书签,它存在于清单文件中。首先,我在控制器中使用 chrome 书签 api,它运行良好。但我决定使用工厂来获得清晰的代码和最佳实践。
我的 index.html 文件
<!DOCTYPE html>
<html lang="en" ng-app="BookmarksSharer" ng-csp>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bokmarks sharer</title>
<link rel="stylesheet" href="/css/main.css"/>
<script src="/javascript/jquery-2.1.1.min.js"></script>
<script src="/javascript/angular.min.js"></script>
<script src="/javascript/bookmark_sharer.js"></script>
<script src="/javascript/MainController.js"></script>
<script src="/javascript/BookmarkService.js"></script>
</head>
<body>
<div id="main_popup" ng-controller="MainController">
<p>Bookmarks</p>
<ul>
<li ng-repeat="bookmark_folder in bookmarks_folders" id="{{bookmark_folder.title}}">
{{bookmark_folder.title}}
<ul ng-repeat="bookmarks in bookmark_folder">
<li ng-repeat="bookmark in bookmarks | filter">{{bookmark.title}}</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
bookmark_sharer.js 很简单
var app = angular.module("BookmarksSharer", []);
MainController.js 也很简单。
app.controller('MainController',['$scope', 'bookmarkFactory', function($scope, bookmarkFactory){
$scope.boormarks_folders = bookmarkFactory.folders;
}]);
还有我的工厂
app.factory('bookmarkFactory', function () {
var bookmarks_folders;
function allBookmarksFolders(){
chrome.bookmarks.getTree(function(bookmarks_tree){
bookmarks_folders = bookmarks_tree[0].children;
});
return bookmarks_folders;
}
return {
folders: allBookmarksFolders()
};
});
为什么 $scope.bookmarks_folders 未定义?
ExpertSystem 您的代码也无法正常工作。简单的解决方案是
app.controller('MainController',['$scope', function($scope){
chrome.bookmarks.getTree(function(nodes){
$scope.bookmarks_folders = nodes[0].children;
$scope.$apply();
})
}]);
但我想使用工厂或服务来组织我的代码。