`

AngularJs $scope function and Filter 异同

阅读更多

首先我们看这样一个实例:

// Filter
sl.filter('titleFilter', function() {
    return function(title, id) {
      var url = '/public/article#/' + id;
      return '<a href="' + url + '">' + title + '</a>';
    };
  });

 

使用实例:(Works good)

<h6 class="news-title" ng-bind="v.title | titleFilter:v.id"></h6>

 

另一实例:(Html插入, It doesn't work, WHY?)

$scope.getHtml = function (html) {
      return $sce.trustAsHtml(html);
    };

 

<h6 class="news-title" ng-bind-html="getHtml(v.title | titleFilter:v.id))"></h6>

 

转换思路:

// Controller $scope function
$scope.getTitle = function(title, id) {
      var url = '/public/article#/' + id;
      return '<a href="' + url + '">' + title + '</a>';
    }

 (Work perfect)

<h6 class="news-title" ng-bind-html="getHtml(getTitle(v.title, v.id))"></h6>

 

分享到:
评论

相关推荐

    AngularJS-Scope.SafeApply:AngularJS $ scope。$ apply()没有麻烦和错误

    AngularJS-Scope.SafeApply AngularJS $ scope。$ apply()没有麻烦和错误:) 关于 AngularJS的核心功能是范围,变量和绑定的使用。 在代码级别更新值并回显DOM或应用程序的过程围绕着对范围运行摘要来查看发生了...

    angularJS 中$scope方法使用指南

    在AngularJS中,$scope是控制器的载体,是模型和视图的连接点,负责传递数据和处理用户输入等。下面将详细说明如何在AngularJS中使用$scope方法。 ### $scope基本概念 在AngularJS中,$scope是每个控制器的子作用...

    angularJS 模态窗口$modal的使用实例

    app.controller('ModalInstanceCtrl', function($scope, $modalInstance, message) { $scope.message = message; $scope.ok = function() { $modalInstance.close(); }; $scope.cancel = function() { $...

    angularJs中$scope数据序列化的实例

    在AngularJS中,$scope是应用中的模型层,它连接视图和控制器,负责存储和管理应用程序的数据。本文将深入探讨如何在AngularJS中实现$scope数据的序列化,并通过一个具体的实例来演示这一过程。 数据序列化是将对象...

    深入探究AngularJs之$scope对象(作用域)

    这两天学习了AngularJs之$scope对象这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 一、作用域 AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染...

    angularjs中$http请求的几种写法

    $scope.selectTeacherTask = function () { $http.get('/Ls/MyTask/GetLessonTask?roletype=Teacher&pageSize=1000&pageIndex=1') .success(function (data) { $scope.teacherTaskList = data; }); }; ``` ...

    angularJs利用$scope处理升降序的方法

    通过利用AngularJS内置的$scope服务以及$filter过滤器,可以轻松实现这一功能。下面将详细解释如何使用$scope变量来控制数据的排序状态,以及如何使用$filter服务中的orderBy过滤器来根据状态进行数据排序。 ### $...

    AngularJS 限定$scope的范围实例详解

    主要介绍了AngularJS 限定$scope的范围实例详解的相关资料,需要的朋友可以参考下

    详解在AngularJS的controller外部直接获取$scope

    在AngularJS中,`$scope`是连接控制器与视图的数据模型,它是应用程序的主要数据绑定层。当我们在控制器外部需要直接访问或修改AngularJS中的数据时,如何获取`$scope`就显得至关重要。传统的Web应用可能直接操作DOM...

    深入解析AngularJS框架中$scope的作用与生命周期

    而$scope对象是AngularJS中控制器和视图之间通信的桥梁,是作用域的实现方式,它在模型层(Model)与视图层(View)之间提供了数据绑定的上下文。本文将深入解析$scope的作用与生命周期,并探讨在AngularJS框架中...

    AngularJS 监听变量变化的实现方法

    $scope.$watch('search.subj', function(newVal, oldVal) { if (newVal !== oldVal) { // 如果已存在延时任务,取消之前的任务,避免重复执行 if (timeout) $timeout.cancel(timeout); // 使用$timeout来延迟...

    AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析

    在AngularJS中,$injector、$rootScope和$scope是核心组件,它们对于理解和使用这个强大的MVC框架至关重要。下面将详细解析这三个概念及其关联关系。 1. **$injector(依赖注入器)** - $injector是AngularJS中的...

    AngularJS中$apply方法和$watch方法用法总结

    最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播...

    关于angularJs指令的Scope(作用域)介绍

    在AngularJS中,指令是构建可复用组件的关键机制,而Scope则是指令中非常重要的一个概念,它充当了数据模型和视图之间的桥梁。AngularJS为指令的`scope`参数提供了三种不同的配置选项:`false`、`true`和`{}`。下面...

    浅谈angularjs $http提交数据探索

    AngularJS是一个流行的JavaScript框架,用于构建单页应用程序(SPA)。它提供了强大的数据绑定和依赖注入功能,使得前后端交互更加简便。在AngularJS中,$http服务是用于与服务器进行异步通信的主要工具,它支持GET...

    angularjs 中$apply,$digest,$watch详解

    - 第二种使用`setInterval`,由于它不在AngularJS的上下文中,因此需要在每次更新后调用`$scope.$apply`来触发脏检查。 总结来说,`$apply`、`$digest`和`$watch`在AngularJS中构建了一个强大的数据绑定系统,确保...

Global site tag (gtag.js) - Google Analytics