AngularJS

版本:
Angular2以后官方的称呼就叫Angular,不是Angular2,也不是Angular4,而1.x版本的老版本,叫AngularJS。

学习AngularJS 1.x:
https://hairui219.gitbooks.io/learning_angular/content/zh/chapter05_1.html

ng-app指令

一个AngularJS web应用中只能出现一个ng-app指令,它相当于main方法。
有两种写法,ng-app或者ng-app=”自定义的模块”,ng-app有一个默认的模块,ng-app=“自定义的模块” 是一个使用了自定义的模块,该自定义的模块继承了那个初始的默认的模块,可以调用初始的默认的模块的方法。
HTML5规范要求所有的用户自定义属性以”data-“开头,所以data-ng-app是符合HTML5规范的写法,用HTML Validator检查代码的时候,ng-app会报错,而data-ng-app不会。

控制器——controller

控制器——controller 是一种封装,是AngularJS设计模式的一种定义。
可以通过ng-controller指令来创建一个控制器,也可以通过$controller服务来创建一个控制器。
控制器通过AngularJS的另一个设计模式——依赖注入 来使用更多服务。比如$scope。可以将$scope理解为 页面与数据的高速通道、桥梁、连接、粘合剂,也就是控制器中定义的所有东西,想要反应到页面上,就必须通过$scope。

使用ng-init向controller中传递参数

使用ng-init向controller中传递参数,不能立即获取到,是因为 “the controller is being created before the variable is added to the $scope object”

<div ng-include="'modules/units/views/view.html"
     ng-controller="UnitsViewCtrl"
     ng-init="unitId = '123'">
</div>
$scope.setUnitId=function(unitId) {
    $stateParams.id=unitId;
    getData();
}
<div ng-include="'modules/units/views/view.html'"
     ng-controller="UnitsViewCtrl"
     ng-init="setUnitId('123')">
</div>

可以使用$watch,或者在ng-init中调用函数
http://corpus.hubwiz.com/2/angularjs/18608161.html

ng-template寄宿方式

<script type="text/ng-template" id="/tpl.html">
 Content of the template.
 </script>

angular.js 中 父级和 子集 controller 之间的通讯
http://yijiebuyi.com/blog/62f8daffb5c629e85de91ca0b3942985.html

AngularJs中的directive(一)
https://segmentfault.com/a/1190000007018923

$watch监听属性变动

$watch是一个scope函数,用于监听模型变化,当模型部分发生变化时通知。$watch函数会返回一个注销监听的函数。
示例:

$scope.multiModel = [];
var destroyWatch = $scope.$watch('multiModel.length', function () {
//如果不再需要监听,则注销。
destroyWatch();
})

angularjs-dropdown-multiselect

http://ngmodules.org/modules/angularjs-dropdown-multiselect

<script src="https://cdn.bootcss.com/angularjs-dropdown-multiselect/1.11.8/angularjs-dropdown-multiselect.min.js"></script>
angular.module('hxyclient', [
    'angularjs-dropdown-multiselect'
]).....
$scope.multiModel = []; 
$scope.multiModelOptions = [{id: 1, label: "text1"}];
<div ng-dropdown-multiselect="" style="float:left;" extra-settings="{ scrollableHeight: '500px', scrollable: true }"
     options="multiModelOptions" translation-texts="{buttonDefaultText:'选择属性',dynamicButtonTextSuffix:'选择属性',checkAll:'全选',uncheckAll:'重置'}"
     selected-model="multiModel" checkboxes="true">
</div>

ng-if中的ng-model值无效的问题

与其他指令一样,ng-if指令也会创建一个子级作用域,在ng-if中每个包含的元素都拥有自己的作用域,相对于控制器作用域来说,这个作用域属于一个子级作用域,所以要绑定控制器中的变量值必须添加$parent标识。

gulp编译后select控件缺失请选择项

查看编译后的html文件,发现option内容变成了

<option value>-- 选择所属工程 --</option>

在源码中把value的值由””(空白)修改为” “(空格)解决了问题。对取值做trim可使编译前的代码恢复正常工作。

<select ng-model="collector.projectId" ng-options="item.id as item.name for item in projects" required>
  <option value=" ">-- 选择所属工程 --</option>
</select>

指令

scope中不同类型配置,在html中传值的格式不同。
@ 直接传值 字符串单向绑定,
= 传引用,模型双向绑定,
& 方法绑定
bool值需要设置为=,如果出现值总是传不进去,尝试更换scope中的参数名。

app.directive('unitParaGroup', function() {
    return {
        restrict: 'E',
        templateUrl: 'modules/units/components/units.paraGroup.html',
        scope : {
            title : '@',
            unitData: '=',
            attributes:'=',
            column : '@',
        },
    };
})
<unit-para-group title="机组参数设定" attributes="analogSettingAttrs" unit-data="unitLastestData" column="{{unitParaGroupColumn}}" ng-if="!hideSettingGroup"></unit-para-group>

在angular1.5的版本之前,都是以directive作为组件化的形式,而directive本身是一个指令,而并非是一个组件,所以它并不能很好的承担组件这一个职责,所以google在angular1.5的版本中推出了component组件。

数据共享

在多个controller中共享数据的方式

  • 使用$rootScope
  • 使用service
  • 通过$scope的事件传播

要注意如果需要共享的数据是网络获取到的,并且多个controller同时发起请求,为了做到只需要一个实际请求即可,需要做请求状态判断处理。
在多个AngularJS controller之间共享数据
http://blog.51cto.com/xitongjiagoushi/1684429

发表评论