AngularJS Directive replace中的一些问题

自定义 Directive 中使用 template 和 replace 来定义替换的内容时遇到了

1
Error: [$compile:tplrt] Template for directive 'people' must have exactly one root element.

这样的错误，自定义的名为‘ people ’的 directive 必须只能拥有一个根节点。

部分源程序如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var App = angular.module("myApp", []);
App.directive("people", function(){
	return {
		restrict: "E",
		replace: true,
		template: "<p>姓名:{{data.name}}</p><p>性别:{{data.sex}}</p>"
	};
});
App.controller("PhoneListCtrl", function($scope){
	$scope.data = {
		name: "Jack",
		sex: "男"
	};
});

当 replace 为 false （默认）时，template 的内容插入到自定义的 Directive 中；当 replace 为 true 时，template 的内容替换掉自定义的 Directive 且 template 的内容只能有一个根节点，即只能有一个元素。

所以解决方法是删掉一个 p 元素，或者把 replace 改为 false 。

然后我想能不能在 people 元素内把删掉的 p 元素内容加进去即这样：

1
<people><p>性别:{{data.sex}}</p></people>

结果是，不行。

不论是 replace 为 true 或者 false，people 里面的内容全部都会被 template 替换掉，要想保存 people 里原有的内容，要加入transclude: true，并在 template 中加入 <div ng-transclude></div>来保存原有的内容，修改后的内容为：

1
2
3
4
5
App.directive("people", function(){
	return {
		restrict: "E",
		transclude: true,
		template: "<p>姓名:{{data.name}}</p><p>性别:{{data.sex}}</p><div ng-transclude></div>"

这几天沉迷于《巫师3》，要是有机会参与开发这样的游戏该是多美妙的事情

展开全文 >>

AngularJS:Uncaught Error: [$injector:modulerr]!问题

使用控制器的时候，出现如下这种错误信息：

1
2
3
4
5
6
7
8
9
10
11
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=myApp&p1=Error%3A%2…tp%3A%2F%2F127.0.0.1%3A8020%2FAngularTest%2Fjs%2Fangular.min.js%3A22%3A179)
    at angular.min.js:6
    at angular.min.js:42
    at q (angular.min.js:7)
    at g (angular.min.js:41)
    at eb (angular.min.js:46)
    at c (angular.min.js:21)
    at Sc (angular.min.js:22)
    at ue (angular.min.js:20)
    at angular.min.js:331
    at HTMLDocument.b (angular.min.js:38)

不能获取什么，模块什么的不懂，把压缩版的 Angular.min.js 切换 Angular.js 查看详细错误信息：

1
2
3
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
....

‘myApp’ 模块得不到。这个 myApp 就是声明 AngularJS 应用的 ng-app="myApp"，要使用 angular.module 函数来创建模块：

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

创建模块后错误变成：

1
angular.js:14525 Error: [$controller:ctrlreg] The controller with the name 'MyController' is not registered.

我定义的控制器 MyController 还没注册，使用以下方式注册：

1
app.controller('MyController', function($scope){...});

然后就可以了。

一般还有些情况是对应的模块文件没有加载，如 angular-route.js 作为一个单独的模块并没有合并到 angular.js 中，所以要单独加载。

要是到这里还没有解决问题的话，就要看看代码有没有写错了，常见的错误是(我平时常犯的 orz)，没有关闭标签 <script> </script>

学习愉快。

展开全文 >>

微信小程序-事件处理

先看一下微信小程序对事件的解释：

文字叙述一下

什么是事件

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息，如 id, dataset, touches。

就是那些点击、鼠标移进移出之类的动作啦。小程序绑定事件的方法是在 wxml 文件对应的组件中使用 bindtap加上事件名字就可以了。例如：

1
<view bindtap="test"></view>

然后当点击这个组件的时候小程序就会在该页面对应的脚本文件的 Page 中找到相应的事件处理函数，下面举例写这个 test 事件:

1
2
3
4
5
6
Page({
   ....
   test: function(event){
      console.log('Click！');
   }
})

先点击一下组件，然后打开控制台看看是否成功。毫无疑问是可以的。接下来再看看获得的这个事件里面到底有什么信息

嗯，首先是 type事件类型是 tap ，这个 tap 事件就是手指触摸后马上离开的动作，也就是点击啦。timeStamp为发生事件的时间戳，detail表示事件的某种信息，根据不同的事件会返回不同的信息，这里返回的是点击时的坐标。currentTarget和target这两个属性比较容易搞糊涂，currentTarget在事件流的捕获、目标和冒泡阶段，而target只是在事件流的目标阶段，当事件流是在目标阶段时，这两个的值是一样的，而事件流在捕获和冒泡阶段的话，两个属性的值不一样，下面会具体分析。最后是changedTouches和touches的比较，touches属性当每个事件被触发时，就会获取此时每个触点的信息，并保存在列表中，是只读属性。changedTouches跟差不多也是可以记录触点的信息，但它是根据事件的变法来获取触点的信息，举个栗子就是，当一只手指触碰屏幕时，changedTouches和touches都会同时记录这个触点的信息，信息一样；而当手指离开屏幕时，触点消失，touches中的记录就会消失，而由于这个过程是由接触事件向没有接触事件的变化，所以changedTouches仍然记录着触点移开前的信息，这就是两者之间的区别了。

再举例分析一下currentTarget和target的不同

我先把事件 test 绑定在 Image 组件上，即：

1
2
3
4
<view id="view" class="userinfo">
    <image id="image" bindtap="test" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>

然后点击头像，查看currentTarget和target的信息：

一样，因为目标对象都是 image 组件。再把 test 事件绑定到 image 的父组件 view 上：

1
2
3
4
<view id="view" bindtap="test" class="userinfo">
    <image id="image" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>

然后点击头像，查看currentTarget和target的信息：

可看到信息不一样了，不难发现这次 target 保存的信息是点击的 image 组件的信息，而 currentTarget 保存的是绑定 test 事件的 view 组件的信息。到这里currentTarget和target的区别已经很明显了。

分析完 event 对象，继续分析 currentTarget 对象，因为这个很常用，经常用它来获取触发事件的组件信息，先把它打印出来：

1
2
3
test: function(event){
      console.log(event.currentTarget)
  }

点击头像，获取信息：

1
2
3
4
5
6
Object {id: "image", offsetLeft: 156, offsetTop: 110, dataset: Object}
dataset:Object
id:"image"
offsetLeft:156
offsetTop:110
__proto__:Object

信息主要有dataset对象，目标组件id的值，还有相对页面的偏移量offsetLeft和offsetTop。

看看 dataset 里面装的是什么

1
2
3
test: function(event){
      console.log(event.currentTarget.dataset)
  }

嗯，什么都没有。查阅文档得知，dataset 是组件上由data-开头的自定义属性组成的集合，所以我们在 view 组件上增加几个自定义属性：

1
2
3
4
<view bindtap="test" data-num="1" data-hi="hello" id="view" class="userinfo">
    <image id="image" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>

有了，然后获取数据的时候直接按下面方法使用就行了：

1
2
event.currentTarget.dataset.hi
event.currentTarget.dataset.num

绑定事件除了用 bind之外还可以用 catch，区别是 bind不会阻止冒泡事件向上冒泡，而 catch会。举例说明：

1
2
3
4
5
6
7
8
9
test1: function(event){
      console.log("test1")
  },
  test2: function (event) {
    console.log("test2")
  },
  test3: function (event) {
    console.log("test3")
  }

我定义了三个事件，然后绑定在三个嵌套的组件里

1
2
3
4
5
6
7
8
9
10
11
<view bindtap="test3" class="container">
  <view bindtap="test2" data-num="1" data-hi="hello" id="view" class="userinfo">
    <view bindtap="test1" class="classname">
    <image id="image" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

点击头像，可以发现：

事件由里向外顺序触发，向冒泡一样。如果在第二层的 view 那里使用 catchtap，即：

1
2
3
4
5
6
7
8
9
10
11
<view bindtap="test3" class="container">
  <view catchtap="test2" data-num="1" data-hi="hello" id="view" class="userinfo">
    <view bindtap="test1" class="classname">
    <image id="image" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

点击头像：

冒泡在第二层那里被中断了。catch就是这么玩。

完。

展开全文 >>

微信小程序--demo代码分析

微信小程序已经出来很久了，很多公司都开发了自家产品的小程序版本来迎合这股热潮，大家都非常看好小程序，认为这就是未来。我也是这么认为的，虽然好像反响不大，朋友圈里也没怎么看到相关消息，不免觉得有点失望。我觉得大部分的原因是大家都找不到小程序的入口在哪哈哈，因为要激活，然后大部分必要的应用自己手机都有安装，而且用习惯了就直接打开手机上的 APP 就行了，所以就感觉小程序没什么新奇的地方。其实小程序不但对于开发者来说很方便（跨平台，包装很好的 API ，开发成本低等），而且小程序作为 WEB APP 的代表，对于大众来说不仅能节省手机的内存空间还不用花时间去下载安装，个人认为迟早是要替换手机原生 APP 的。

之前刚出的时候是听说只有企业和政府能开发和发布小程序，我就没有去凑一脚了，现在有了个人开发者这一选项，我决定去一探究竟。
more >>

展开全文 >>

HSLA与RGBA

选择颜色的时候我一般使用 rgba 的方式，简便易理解，所有颜色都是由三原色（红、绿、蓝）各种混合而成。但其实真正明白 CSS3 的 HSLA 就知道 HSLA 其实更好用，例如在在提高颜色亮度方面非常方便。

HSLA 是由 H：HUE（色调）、S：Saturation（饱和度）、L：Lightness（亮度）和 A：Alpha（透明度）组成。控制颜色的是色调，0 为红色、120 为绿色、240 为蓝色

如红色就是

1
background-color: hsla(0, 80%, 50%, 1);

然后把亮度调到 80%，即：

1
background-color: hsla(0, 80%, 80%, 1);

颜色变浅了
more >>

展开全文 >>

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

平庸黑夜中气质不凡的路灯