指令调用控制器中的方式（给指令的事件绑定执行函数）

angluarJS中，如果指令内部的事件触发，这个时候需要调用外部controller中的方法，可以在指令的隔离作用域中使用&将controller中的方法传递到指令中，供指令调用，需要注意的事，如果传递参数的话（比如自定义的ngChange事件触发，会把当前的选择项作为参数传递到控制器中）这个时候在声明指令时候,需要填写方法调用的函数表达式，并且如果包含函数的话，需要在调用改方法的时候指明参数，该参数名字与在指令中调用中传递的参数JSON的key一致（指令中必须传递JSON的形式来调用）

    angular.module("app1", [])
.controller("Ctrl1", function($scope, $element)
{
  $scope.someThingChanged = function(arg1,arg2)
  {
       console.log(arg1,arg2);
  }
})
.directive("myDirective", function($timeout)
{
  return {
    scope: {
      ngChange: '&'
    },
    link: function(scope, element, attrs)
    {
      $timeout(function()
      {
        scope.ngChange({
          name:'张三',
          age:28
        });
      });
    }
  }
})

声明指令

<div my-directive ng-change="someThingChanged(name,age)"></div>
调用时候上面输出 ：  张三 28

控制器调用指令的方法。

使用双向绑定的形式，首先在控制器新建一个空对象，在指令中将方法赋值给这个对象的一个属性，这样在控制器用就可以获取这个方法，进而进行调用。

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.focusinControl = {
  };
});
app.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{internalControl}}</div>',
    scope: {
      control: '='
    },
    link  : function (scope, element, attrs) {
      scope.internalControl = scope.control || {};
      scope.internalControl.takenTablets = 0;
      scope.internalControl.takeTablet = function() {
        scope.internalControl.takenTablets += 1;  
      }
    }
  };
});

html

<focusin control="focusinControl"></focusin>

less并非多么高大上的东西，无非就是个编写CSS的工具，让我们像编程一样来书写CSS，关于less常用的特性无非几个，下面简单将常用这些特性简单记录。方便以后查阅

less编译环境

less->CSS的方法有多种，比如使用 grunt或者lgulp等构建工具配合相应的插件来完成less的自动编译。以gulp为例，gulpfile.js的代码如下。

var less = require('gulp-less');
var path = require('path');
var gulp=require('gulp');
gulp.task('less', function () {
  gulp.src('less/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('css'));
});

gulp.watch(['less/*.less'], ['less']) 
gulp.task('default', ['less']);

通过watch 来见监听less文件的变化自动运行less任务。从而完成less->css的自动编译，可以查看生成的CSS文件

我常用的less 特性。

@import

在标准的CSS中，@import必须在所有其他类型的规则之前。但是Less不在乎你把@import语句放在什么位置。
@import语句会通过Less依赖文件扩展名的方式区别对待不同的文件：

• 如果文件有一个.css扩展名，则将它作为CSS对象，同时@import语句保持不变
• 如果有其他扩展名，则作为Less对象，然后导入它。
• 如果没有扩展名，则插入.less，然后将它作为Less文件导入包含进来。
• 使用@import (reference)导入外部文件，但是不添加导入的样式到编译输出中，只引用。

变量

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。变量@开头，全局的变量可以在多个less文件之间共用

@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

生成的CSS 如下

.mythemes tableBorder { 
  border: 1px solid #b5bcc7; 
 }

同时还支持变量的计算。

@width: 10px + 5;
  .btn{
    width:@width;
  }

编译为：

@width: 10px + 5;
  .btn{
    width:@width;
  }

变量查找以及变量作用域：在定义一个变量两次时，只会使用最后定义的变量，Less会从当前作用域中向上搜索。这个行为类似于CSS的定义中始终使用最后定义的属性值。

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

编译后的CSS为：

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

Mixins（混入）

在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

less源文件

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

编译后的CSS文件：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果不想在CSS中保留原来的 .bordered

可以将 .bordered 修改为 bordered() ,同时还支持混入参数，支持默认参数。

less文件

.bordered(@width:5px) {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  width:@width;
}
#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered(10px);
}

编译后的文件

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  width: 5px;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  width: 10px;
}

像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。

.box1(@x:0,@y:0,@blur:1px,@color:#000){ 
   -moz-box-shadow: @arguments; 
   -webkit-box-shadow: @arguments; 
   box-shadow: @arguments; 
 } 
 .mybox { 
     .box1(10px,12px,13px,red); 
 }

编译后：

.mybox {
  -moz-box-shadow: 10px 12px 13px red;
  -webkit-box-shadow: 10px 12px 13px red;
  box-shadow: 10px 12px 13px red;
}

嵌套

在写CSS的时候 为了避免造成CSS污染 我们会采用命名空间的机制，在less中可以通过嵌套来解决。

less文件

.myspace{
     .class1{
         width:20px
     }
     .class2{
         height:30px
     }
 }

生成的CSS文件

.myspace .class1 {
  width: 20px;
}
.myspace .class2 {
  height: 30px;
}

在嵌套使用时可以通过 &访问上一级元素

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
}

编译之后为

#bundle .button {
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#bundle .button:hover {
  background-color: white;
}

在less中可以如果将mix和嵌套相结合。可以使用>来进行导入

比如 less文件

.myspace{
   .class1{
   width:20px
   }
   .class2{
   height:30px
   }
 }
 .redbutton{
     color:red;
     .myspace > .class2;
 }

CSS 文件

myspace .class1 {
  width: 20px;
}
.myspace .class2 {
  height: 30px;
}
.redbutton {
  color: red;
  height:
}

另外还有一些关于运算的函数 感觉意义不大 比如颜色计算的fadeIn等。

Comments（注释）

LESS 对注释也提供了支持，JavaScript 中的注释方法一样，主要有两种方式：单行注释和多行注释，这与 ，我们这里不做详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释

extend

extend是一个Less伪类，它会合并它所在的选择其和它所匹配的引用。

nav ul {
  &:extend(.inline);
  background: blue;
}

在上面设置的规则中，:extend选择器会在.inline类出现的地方在.inline上应用”扩展选择器”(也就是nav ul)。声明块保持原样，不会带有任何引用扩展(因为扩展并不是CSS)。

extend即为把当前的选择的器应用到相应的选择器定义的样式中，有点像组合的意思，跟混合的作用类似，基本是复用之前定义的样式，mix是将选择的样式引进来，extend是将当前的选择器。添加到之前定义的样式处。（有点绕啊）看代码吧

less文件

nav ul {
      &:extend(.inline);
      background: blue;
    }
    .inline {
      color: red;
    }

输出CSS：

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

另外还有一些关于运算的函数 感觉意义不大 比如颜色计算的fadeIn等。

Comments（注释）

LESS 对注释也提供了支持，JavaScript 中的注释方法一样，主要有两种方式：单行注释和多行注释，这与 ，我们这里不做详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释