• AngularJS入门基础——表达式


    表达式在AngularJS应用中广泛的使用,因此深入理解AngularJS如何使用并运算表达式是非常重要的。

     
    表达式和eval非常相似,但是由于表达式由AngularJS来处理,它们有已下显著不同的特性:
    第一:所有的表达式都在其属的作用域北部执行,并有访问本地$scope的权限;
    第二:如果表达式发生了TypeError和ReferenceError并不会抛出异常;
    第三:不允许使用任何流程控制功能(条件控制,例如If/esle);
    第四: 可以接受过滤器和过滤器链;
     
    关于解析表达式:AngularJS通过$parse[解析]这个内部服务来进行表达式的解析,这个服务能够访问当前所处的作用域。
    这个过程允许我们访问定义在$scope上的原始JavaScript数据和函数。
     
    // HTML
    <div ng-controller="MyController">
        <input ng-model="expr"
                type="text"
                placeholder="Enter an expression" />
        <div>{{ parsedExpr }}</div>
      </div>
     
    // SCRIPT
    angular.module('myApp', [])
        .controller('MyController',
        ['$scope', '$parse', function($scope, $parse) {
     
          $scope.person = {
            name: "Ari Lerner"
          };
     
          $scope.$watch('expr', function(newVal, oldVal, scope) {
            if (newVal !== oldVal) {
              // 让我们建立parseFun表达式
              var parseFun = $parse(newVal);
              // 获取记过解析后的表达式的值,放在scope里,output出来
              scope.parsedExpr = parseFun(scope);
            }
          });
        }]);
     
    插入字符串:
     在AngularJS中,我们的确有手动运行模板编辑的能力。例如:差值允许基于作用域上的某个条件实时更新文本字符串。
    要在字符串模板中做插值操作,需要在你的对象中注入$interpolate服务。
    angular.module('myApp', [])
        .controller('Mycontroller', function($scope, $interpolate) {
            //我们同事拥有了两个内置服务的权限
        });
     
    $interpolate【有三个参数】服务返回一个函数,用来在特定的上下文中运算表达式。
     
    //HTML
    <div ng-controller="TestController">
      <input ng-model="to" type="email" placeholder="Recipient">
      <textarea ng-model="emailBody"></textarea>
      <pre>{{ previewText }}</pre>
    </div>
     
    //其实这里面我测试后我有一点不是很理解,为何插值没有实现previewText 还是会有更新,看脚本表面的意思应该只是把插值放进来才对的哦!
     
    //SCRIPT
    angular.module('myApp', [])
      .controller('TestController', function($scope, $interpolate) {
        $scope.$watch('emailBody', function(body) {
          if (body) {
            var template = $interpolate(body);
            $scope.previewText = template({to: $scope.to});
          }
        });
      });
    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    最短路-dij
    链式前向星
    B树、B+树
    C++类
    差分约束
    数位DP
    Markdown编辑器:表格
    git使用笔记
    leetcode 162. 寻找峰值(二分)
    python matplotlib包的安装注意事项:报错——No such file or dir : tmp/matplotlib-xxxxxx
  • 原文地址:https://www.cnblogs.com/mcat/p/4186705.html
Copyright © 2020-2023  润新知