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

2021-02-02 09:47:58 浏览数 (1)

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

angular1.x 学习目录

  • 1-angular 学习导航和基础
  • 2-表达式和指令，数据绑定
  • 3-模型和作用域 scope
  • 4-控制器和过滤器

一 表达式

  • 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 可以手动加载
代码语言：javascript复制
// 页面加载完成后,再加载模块
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 做一个循环遍历数组中的参数）
代码语言：javascript复制
<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绑定的值覆盖该元素的内容。

数据绑定

代码语言：javascript复制
<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:

代码语言：javascript复制
<body ng-app="myApp">

<runoob-directive>runoob-directive>

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

body>
复制代码

Tips

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

代码语言：javascript复制
//元素名
<runoob-directive>runoob-directive>

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

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

//注释

复制代码
  • 当然方法太多也不好，我这里推荐使用和 vue 一样的元素名来调用我们的指令（这里的指令我们可以理解为 一个我们自己创建的带有特殊指令的元素）
  • 限制使用
代码语言：javascript复制
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "自定义指令!"
    };
});

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

复制代码

总结一下

angular 自定义的几种写法

  • 1、上面这种要清晰一下
代码语言：javascript复制
// 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、指令的配置项还有很多
代码语言：javascript复制
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
代码语言：javascript复制
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";
}]);
复制代码
angularjs html javascript 编程算法

0 人点赞