2-进军 angular1.x 表达式和指令

西南_张家辉

发布于 2021-02-02 09:47:58

3.4K0

文章被收录于专栏：张家辉的树屋张家辉的树屋

2-表达式和指令，数据绑定

angular1.x 学习目录

一表达式

ng-init
ng-bind
- 两者都可以像 JavaScript 一样内嵌原生的 js代码，并且很好的运行
- 其中数字，字符串，object 对象，数组和表达式都和 JavaScript 的展现方法相同。

tips

每个页面只有一个 ng-app 指令，多的不起作用

1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上。
2.ng-app作用：告诉子元素指令是属于angularJs。
3.ng-app的值可以为空（练习），项目中一定要赋值，后面所说的模块。

如果有多个 ng-app 可以手动加载

// 页面加载完成后,再加载模块
angular.element(document).ready(function() {
//手动加载myApp2 ng-app
angular.bootstrap(document.getElementById("myApp2"), ['myApp2'])
}) 
复制代码

二指令

一些常用的指令

ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-repeat 指令会重复一个 html 元素（其实相对于 v-for 做一个循环遍历数组中的参数）

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 
<p>循环对象：p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  li>
ul>
 
div>
复制代码

Tips

ng-model是用于表单元素的，支持双向绑定。对普通元素无效；
ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；
当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。

数据绑定

<div ng-app="" ng-init="firstName='John'">
 
     <p>在输入框中尝试输入：p>
     <p>姓名：<input type="text" ng-model="firstName">p>
     <p>你输入的为： {{ firstName }}p>
 
div>
复制代码

数据绑定

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。

创建自己的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp">

<runoob-directive>runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "自定义指令!"
    };
});
script>

body>
复制代码

Tips

我们可以通过很多种来调用我们刚刚创建好的指令

//元素名
<runoob-directive>runoob-directive>

//属性
<div runoob-directive>div>

//类名
<div class="runoob-directive">div>

//注释

复制代码

当然方法太多也不好，我这里推荐使用和 vue 一样的元素名来调用我们的指令（这里的指令我们可以理解为一个我们自己创建的带有特殊指令的元素）
限制使用

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "自定义指令!"
    };
});

//restrict 值可以是以下几种:

复制代码

总结一下

angular 自定义的几种写法

1、上面这种要清晰一下

// angular.module('MyApp',[])
// .directive('zl1',zl1)
// .controller('con1',['$scope',func1]);
//
// function zl1(){
//   var directive={
//     restrict:'AEC',
//     template:'this is the it-first directive',
//   };
//   return directive;
// };
//
// function func1($scope){
//   $scope.name="alice";
// }

//这是教程里类似的写法
angular.module('myApp',[]).directive('zl1',[ function(){
  return {
    restrict:'AE',
    template:'thirective',
    link:function($scope,elm,attr,controller){
      console.log("这是link");
    },
    controller:function($scope,$element,$attrs){
      console.log("这是con");
    }
  };
}]).controller('Con1',['$scope',function($scope){
  $scope.name="aliceqqq";
}]);

复制代码

2、指令的配置项还有很多

angular.module('myApp', []).directive('first', [ function(){
    return {
        // scope: false, // 默认值，共享父级作用域
        // controller: function($scope, $element, $attrs, $transclude) {},
        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
        template: 'first name:{{name}}',
    };
}]).directive('second', [ function(){
    return {
        scope: true, // 继承父级作用域并创建指令自己的作用域
        // controller: function($scope, $element, $attrs, $transclude) {},
        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
        //当修改这里的name时，second会在自己的作用域中新建一个name变量，与父级作用域中的
        // name相对独立，所以再修改父级中的name对second中的name就不会有影响了
        template: 'second name:{{name}}',
    };
}]).directive('third', [ function(){
    return {
        scope: {}, // 创建指令自己的独立作用域，与父级毫无关系
        // controller: function($scope, $element, $attrs, $transclude) {},
        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
        template: 'third name:{{name}}',
    };
}])
.controller('DirectiveController', ['$scope', function($scope){
    $scope.name="mike";
}]);
复制代码

3、more

ngular.module('myApp', []).directive('first', [ function(){
    return {
        scope: false, //默认值为 false 共享父作用域 值为true时共享父级作用域并创建指令自己的                      

        controller: function($scope, $element, $attrs, $transclude) {}, //作用域  值为{}时创建全新的隔离作用域, 值为string时为控制器名称
        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
        template: 'first name:{{name}}',//值为string、function 用于显示dom元素
        templateUrl: 'xxx.html' //值为string function 以id为xxx.html为 调用文件显示
        priority: 0 //指明指令的优先级，若在dom上有多个指令优先级高的先执行
        replace: flase // 默认值为false 当为true是直接替换指令所在的标签
        terminal: true //值为true时优先级低于此指令的其它指令无效
        link:function // 值为函数 用来定义指令行为从传入的参数中获取元素并进行处理
        
    };
}]).directive('second', [ function(){
    return {
        scope: true, 

        // controller: function($scope, $element, $attrs, $transclude) {},
        restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
        //当修改这里的name时，second会在自己的作用域中新建一个name变量，与父级作用域中的
        // name相对独立，所以再修改父级中的name对second中的name就不会有影响了
        template: 'second name:{{name}}',
    };
}])
.controller('DirectiveController', ['$scope', function($scope){
    $scope.name="mike";
}]);
复制代码

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

angularjs