Skip to content

directive组件化开发 #4

New issue
New issue
Open
Open
directive组件化开发#4
@Wscats

Description

@Wscats
Wscats
opened on Jul 20, 2016 · edited by Wscats
Owner
<?php
    $ch = curl_init();
    $url = 'http://apis.baidu.com/jidichong/school_search/school_search?name=广东外语外贸大学&npage=1';
    $header = array(
        'apikey: 0aea38d1a7c4443f2f00adc86c4c3e72',
    );
    // 添加apikey到header
    curl_setopt($ch, CURLOPT_HTTPHEADER  , $header);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    // 执行HTTP请求
    curl_setopt($ch , CURLOPT_URL , $url);
    $res = curl_exec($ch);
    echo $res;
    //var_dump(json_decode($res));
?>

Activity

Wscats

Wscats commented on Jul 20, 2016

@Wscats
Wscats
on Jul 20, 2016
OwnerAuthor
<!DOCTYPE html>
<html ng-app="wsscat">

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/angular.js"></script>

    <body ng-controller="homeCtrl">
        <ul>
            <li ng-repeat="new in news">
                <p>{{new.abstract}}</p>
            </li>
        </ul>
        <button ng-click="more()">查看更多</button>
    </body>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('homeCtrl', ['$scope', '$http', function($scope, $http) {
            $scope.text = '123';

            function getNews() {
                $http.get('baiduApi.php',{
                    keyword:'体育',
                    page:1,
                    count:40
                }).success(function(data) {
                    console.log(data);
                    console.log(data.retData.data);
                    console.log(data.retData.data[0]);
                    $scope.news = data.retData.data;
                })
            }

            getNews();

            $scope.more = function(){
                getNews();
            }

        }])
    </script>

</html>
Wscats

Wscats commented on Jul 20, 2016

@Wscats
Wscats
on Jul 20, 2016
OwnerAuthor

<?php
    $ch = curl_init();
    $url = 'http://apis.baidu.com/songshuxiansheng/real_time/search_news?keyword=体育&page=1&count=40';
    $header = array(
        'apikey: 0aea38d1a7c4443f2f00adc86c4c3e72',
    );
    // 添加apikey到header
    curl_setopt($ch, CURLOPT_HTTPHEADER  , $header);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    // 执行HTTP请求
    curl_setopt($ch , CURLOPT_URL , $url);
    $res = curl_exec($ch);

    //var_dump(json_decode($res));
    echo $res;
?>
Wscats

Wscats commented on Jul 20, 2016

@Wscats
Wscats
on Jul 20, 2016 · edited by Wscats
OwnerAuthor

1.angular.element英文官网原版文档
DOM结构如下：
<div id="text">213</div>
首先用JS原生的选择器，然后再传入angular.element方法里面再去调用相关的函数操作节点

var a = document.getElementById('text');
console.log(angular.element(a).html());
  • addClass()-为每个匹配的元素添加指定的样式类名
  • after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
  • append()-在每个匹配元素里面的末尾处插入参数内容
  • attr() - 获取匹配的元素集合中的第一个元素的属性的值
  • bind() - 为一个元素绑定一个事件处理程序
  • children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
  • clone()-创建一个匹配的元素集合的深度拷贝副本
  • contents()-获得匹配元素集合中每个元素的子元素，包括文字和注释节点
  • css() - 获取匹配元素集合中的第一个元素的样式属性的值
  • data()-在匹配元素上存储任意相关数据
  • detach()-从DOM中去掉所有匹配的元素
  • empty()-从DOM中移除集合中匹配元素的所有子节点
  • eq()-减少匹配元素的集合为指定的索引的哪一个元素
  • find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
  • hasClass()-确定任何一个匹配元素是否有被分配给定的（样式）类
  • html()-获取集合中第一个匹配元素的HTML内容
  • next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素
  • on() - 在选定的元素上绑定一个或多个事件处理函数
  • off() - 移除一个事件处理函数
  • one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
  • parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
  • prepend()-将参数内容插入到每个匹配元素的前面（元素内部）
  • prop()-获取匹配的元素集中第一个元素的属性（property）值
  • ready()-当DOM准备就绪时，指定一个函数来执行
  • remove()-将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）
  • removeAttr()-为匹配的元素集合中的每个元素中移除一个属性（attribute）
  • removeClass()-移除集合中每个匹配元素上一个，多个或全部样式
  • removeData()-在元素上移除绑定的数据
  • replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
  • text()-得到匹配元素集合中每个元素的合并文本，包括他们的后代
  • toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
  • triggerHandler() -为一个事件执行附加到元素的所有处理程序
  • unbind() - 从元素上删除一个以前附加事件处理程序
  • val()-获取匹配的元素集合中第一个元素的当前值
  • wrap()-在每个匹配的元素外层包上一个html元素

**2.**组件获取视图的数据可以用attrs，但数据要来自于表达式{{}}

link: function(scope, element, attrs) {
                    console.log(attrs);
                }

还可以用scope获取

scope: {
                    title: '=expanderTitle'
                }

对应插件中的expander-title='title'，这里注意title是不用表达式{{}}转换的，如果要加表达式只能用attrs的方法来获取视图中的值，还有注意只能是根据定义的组建名字作为前缀expander-定义的属性，才能用scope获取

<expander class='expander' expander-title='title'>
            {{text}}
        </expander>

**3.**用组件操作DOM的时候组建一定要加载在页面的时候才能生效
所以当我们想操作页面的时候我们可以做一个空模版的组建用标签等形式放在页面进行页面的操作

**4.**定义组件的时候要小写
app.directive('wsscat', [function() {}])
因为我们定义组件名字中出现大写字母的时候
app.directive('wssCat', [function() {}])
我们在这种情况会失效

Wscats
changed the title [-]direcivve组件化开发[/-] [+]directive组件化开发[/+] on Jul 26, 2016
Wscats

Wscats commented on Aug 17, 2016

@Wscats
Wscats
on Aug 17, 2016
OwnerAuthor

学习AngularJs:Directive指令用法（完整版）

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Wscats

        Issue actions
          directive组件化开发 · Issue #4 · Wscats/angular-tutorial