[AngularJS] app.run($templateCache) -- zippy simple example

時間 2019-11-10

標籤 angularjs app.run app run templatecache zippy simple example 欄目 AngularJS 简体版

原文原文鏈接

功能》點擊title, 能夠切換Content的顯示/隱藏css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>templateCache</title>
    <link href="foundation.min.css" rel="stylesheet"/>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="app">
    <input type="text" ng-model="zippy.title" />
    <input type="text" ng-model="zippy.content" />
    <zippy title="{{zippy.title}}">
        This is content : {{zippy.content}}
    </zippy>
</body>
</html>

var app = angular.module("app", []);

app.run(function($templateCache) {
  $templateCache.put("zippy.html", '<div><h3 ng-click="toggleContent()">{{title}}</h3><div ng-show="isContentVisible" ng-transclude></div></div>');
});

app.directive('zippy',function(){
    return{
        restrict: 'E',
        scope:{title: '@'},
        transclude: true,
        templateUrl: 'zippy.html',
        link:function(scope){
            scope.isContentVisible = false;
            scope.toggleContent = function(){
                scope.isContentVisible = !scope.isContentVisible;
            }
        }
    }
});

run會在全部angular models加載完畢後加載，適合在裏面定義一些tempalte.html

1. Simple example
2. Cluster（Simple Example）
3. python simple example
4. Naive Bayes（Simple Example）
5. A Simple MVVM Example[Forward]
6. A Simple OpenGL Shader Example
7. [一] ZMQ-c++ Simple example
8. libnice simple-example 分析
9. VPython - example - A simple Clock
10. Springboot-maven--jpa-simple-example
更多相關文章...
• XSL-FO simple-page-master 對象 - XSL-FO 教程
• PHP wordwrap() 函數 - PHP參考手冊

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。