开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular 1.5，从ng-repeat外部调用组件函数？

在Angular 1.5中，可以通过在ng-repeat的外部调用组件函数。具体的步骤如下：

首先，在组件的控制器中定义一个函数，该函数将在ng-repeat的外部调用。例如，我们定义一个名为myFunction的函数。

app.component('myComponent', {
  controller: function() {
    this.myFunction = function() {
      // 在这里编写函数的逻辑
    };
  },
  template: `
    <div>
      <!-- 在这里使用ng-repeat -->
      <div ng-repeat="item in $ctrl.items">
        {{ item }}
      </div>
      <!-- 在这里调用组件函数 -->
      <button ng-click="$ctrl.myFunction()">调用函数</button>
    </div>
  `,
});

然后，在ng-repeat的外部，通过$ctrl来访问组件的控制器，并调用定义的函数。在上面的例子中，我们在按钮上使用ng-click指令来调用myFunction函数。

请注意，$ctrl是组件控制器的别名，可以根据实际情况进行修改。

这样，当点击按钮时，就会调用组件中定义的函数。你可以在函数中编写任何逻辑，以满足你的需求。

关于Angular 1.5的更多信息和使用方法，你可以参考腾讯云的AngularJS产品文档：AngularJS产品介绍。

希望这个答案能够帮助到你！如果还有其他问题，请随时提问。

相关搜索:Angular 1.5:在ngRepeat内部调用组件的方法 Angular 1.5将带参数的函数传递给组件？angular 1.5组件调用父作用域方法 Angular 10:从父组件调用子组件函数 Angular 10从组件到服务文件调用函数 Angular 2:如何从指令到组件调用函数？angular Js在给定函数外部调用函数 Angular:从外部模块加载组件从angular中同级组件的子级调用父组件函数从外部javascript文件调用React组件

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【AngularJS】 # AngularJS入门

return { template: "自定义指令~" } }); 调用：调用时使用 – 分割元素名： <...控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。 5.1....-- 调用方法 --> var app = angular.module("myApp", []); app.controller("personCtrl", function...外部文件中的控制器将标签中的代码复制到 **.js 的外部文件中 HTML中进行引入即可 <div ng-app="myApp" ng-controller="personCtrl...18.1. factory<em>组件</em> factory 是一个<em>函数</em>用于返回值。在 service 和 controller 需要时创建。

23.2K6 0

Angular2 返回时组件生命周期函数不被调用的解决方法

这两天使用 Angular2 遇到的一个 @angular/router 的 bug：症状 @angular/router 版本 3.0.0-beta.2 使用 safari 浏览器，iOS 的都可以...打开 Angular2 官方的范例项目点击导航栏上的 Heroes 转到 Heroes 列表页面后退回到 Dashboard 页面，正常情况下应该有的四个 Heroes 没有出现桌面 safari...或 iOS 的都可以，使用 router 导航到一个新页面，然后后退，原页面 Component 的生命周期函数不会被调用，导致页面表现不正常。...临时应急的话可以自行修改项目目录下的node_modules/@angular/router/src/router.js 的 282 和 284 行即可 this.locationSubscription

1.8K4 0

前端MVC学习总结（二）——AngularJS验证、过滤器、指令

语法格式如下： {{ express | filter:parameter1:p2:p3… | … | …}} 过滤器分了内置过滤器与自定义过滤器，过滤器的调用方式也分了在模板中调用与在函数中调用。...2.1.2、在脚本中调用过滤函数在函数中调用过滤器的方法是：在控制中添加对$filter的依赖，$filter("过滤函数名称")(被过滤对象,'参数') 示例代码： <!...这是angular支持基于“视图-模型-控制器”设计模式原则的主要方面。 Angular中的MVC组件有：模型 — 模型是一个域的属性集合；域被附加到DOM上，通过绑定来存取域属性。...这是通过调用$sce.getTrustedResourceUrl 实现的。为了从其它的域名和协议载入模板，你可以采用白名单化或包裹化任一手段来作为可信任值。...：外部包含是指包含一个独立的外部文件。

15.4K6 0

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

通常写代码时我们无需主动调用 $apply 或 $digest 是因为 angular 在外部对我们的回调函数做了包装。...通常写代码时我们无需主动调用 $apply 或 $digest 是因为 angular 在外部对我们的回调函数做了包装。...angular 无法保证你绝对不会在一个 controller 里更改另一个 controller 生成的 scope，包括自定义指令（Directive）生成的 scope 和 Angular 1.5...从底层实现上来看，service 调用了 factory，返回其实例；factory 调用了 provider，将其定义的内容放在 $get 中返回。...angularjs里比较重要但又很少手动调用的要属$compile服务了，通常在写组件或指令时，都是angularjs自动编译完成的，但有时我们可能需要手动编译，比如封装一个table组件，根据参数实现自定义渲染

7.8K4 0

Angularjs基础(三)

Controller(控制器)，即JavaScript 函数，可以添加或修改属性。　　　　scope 是模型。　　　　...实例：当我们使用ng-repeat 指令时，没个重复项都访问了当前的重复对象。　　　　　　　　...控制器时JavaScript对象，由标准的JavaScript对象的构造函数创建。　　　　　　　　...myCtrl 函数是一个JavaScript 函数。　　　　　　　　　　AngularJS 使用$scope对象来调用控制器。　　　　　　　　　　...　　　　在大型的应用程序中，通常是把控制器存储在外部文件中。

3.1K5 0

【一起来烧脑】一步学会AngularJS系统

{{ x }} ng-repeat指令用在一个对象数组上： <div ng-app=""...image.png 格式化数字为货币格式从数组项中选择一个子集格式化字符串为小写格式化字符串为大写根据某个表达式排列数组服务服务是一个函数或者对 $http服务 $http是AngularJS...}} {{ x.Country }} SQL 使用PHP从MySQL中获取数据实例： <div ng-app="myApp" ng-controller...函数来创建模块 ......库依赖注入依赖注入简化了Angular解析模块/组件之间依赖的过程路由实现多视图的单页Web应用允许通过不同的URL访问不同的内容

5.5K2 0

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

Angular 中的数据绑定是自动从模型和视图间同步数据，Angular的这种数据绑定实现让你可以将应用中的模型和视图的数据看作一个源，视图在任何时候都是对模型的一个投影，当模型发生变化，相关的视图也会发生变化...作用域的特点：作用域提供$watch接口监测模型的变化作用域提供$apply接口传播angular体系外的任何的模型变化作用域可以是嵌套的限制访问应用组件的属性，同时提供共享模型的属性。...你可以从dom元素上使用angular.element(aDomElement).scope()函数获取作用域。查看指令文档了解更多的关于作用域隔离的信息。...一个显式的调用只有在实现自定义事件的会调用使用，或在工作在第三方的库的回调中。进入Angular执行上下文通过调用scope....如果有一个修改被检测到了，那么watch函数被调用用于更新dom为新的值。一旦angular $digest循环完成，执行就会脱离angular 和 js上下文。

13.2K2 0

AngularJS系列之常用指令

这节给大家介绍一下AngularJS中一些常用的指令，例如：ng-app、ng-init、ng-repeat、ng-model等等之类的指令。...: 你输入的为: {{ firstName }} 从例子可以看出...> 使用 ng-repeat 来循环数组 {{ x }} ...你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。..." }; }); 自定义的指令调用方法有多种，例如：元素名、属性、类名、注释这四种方法来实现自定义指令的调用。

2.1K6 0

（4）Angular的开发

最大程度的减少了页面上的 DOM 操作让 JavaScript 中专注业务逻辑的代码通过简单的指令结合页面结构与逻辑数据通过自定义指令实现组件化编程我们需要本地运行 Angular 文档...name: 'zhangsan' }; } ]); 控制器为应用中的模型设置初始状态通过$scope对象把数据模型或函数行为暴露给视图...scope暴露数据模型（数据，行为） AngularJS 表达式可以包含字母，操作符，变量 ng-repeat指令用来编译一个数组重复创建当前元素 {{item}} {{item.content

3.1K4 0

6-进军 angular1.x $http

核心服务 $http $http 1.5+ 抛弃了 success 和 error ，现在使用 var app = angular.module('myApp', []); app.controller.../ 请求失败执行代码 }); }); 复制代码 $http 简写 <li ng-repeat...函数 customersController 是一个标准的 JavaScript 对象构造器。控制器对象有一个属性: $scope.names。...$http.get() 从web服务器上读取静态 JSON 数据。服务器数据文件为： http://www.runoob.com/try/angularjs/data/sites.php。...当从服务端载入 JSON 数据时，$scope.names 变为一个数

5395 0

AngularJS入门 & 分页 & CRUD示例

2.5 ng-controller: (指定控制器) $scope 的贯穿整个AngularJS App应用，所有变量，函数，对象全都绑定在$scope对象中，它在视图和控制器间建立一个通道，基于作用域视图在修改数据时会立刻更新...: (循环数组) //定义一个模块 var app = angular.module("dintalk", []); //定义模块函数 app.controller("myController", function...="arr in list"> {{arr}} 2.7 ng-repeat: (循环对象数组) var app = angular.module..., 40, 50, 60], onChange: function () { //页面变更后触发的方法 $scope.findPage(); //启动就会调用分页组件...分页选项，下拉选择一页多少条记录 onChange: function () {//页面变更后触发的方法 $scope.findPage(); //启动就会调用分页组件

3.3K4 0

【AngularJS】—— 13 服务Service

容器来运行代码了，先看看程序源码，视图方面还是跟普通的代码相同： {{user.name}}...外部可以通过 userList(username) 的方式，进行调用。　　...代码观察$timeout(function(...),350);当输入的间隔超过350ms时，就会触发相应函数function(...)。这样可以有效的防止，不停的刷新请求，造成网页的刷新抖动。　　...在函数内部，调用了我们自己的服务提供的userList方法。当请求成功时，绑定返回值到users中。users会动态的刷新内容。　　查看程序的演示结果： ?

1.4K5 0

AngularJS：如何使用自定义指令来取代ng-repeat

对于处理小数量，ng-repeat是非常有用的，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。也别是数据大多都是静态的或已预存储好的，这个时候应避免使用ng-repeat指令。...ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数。用于监听模型变化，当你的模型部分发生变化时它会通知你。..... .................. .................. ]; $scope.collectionObject = studentsList; //分配给$scope函数...首先必须理解Angular的Directive机制，简单而言，就是我们来指示Angular,当指定的变量被发现，就开始执行后台操作。...，所以输出结果与调用ng-repeat结果相同，但是渲染更快，因为该方法只有一种数据绑定方式和少量的$watch。

2.5K7 0

用AngularJS来实现异步数据的购物车功能设计

ng-repeat的意思是，对于items数组中的每一个元素，都把中的DOM结构复制一份（包括div自身）。...Remove 这个按钮可以让用户从他们的购物车中删除项目，点击产品旁边的Remove按钮即可，因为我们已经设置好了，点击这个按钮将会调用remove（）函数。...在函数的形参中放一个$scope就可以告诉Angular：控制器需要一个叫做$scope的东西。我们可以通过$scope把数据绑定到UI中的元素上。...对于购物车的纯内存版，remove（）函数可以只从数组中删除元素。由于ng-repeat所创建的列表都是绑定在数据上的，所以当数组中的项目消失时，这个列表将会自动收缩。...记住，无论何时，只要用户点击了Remove按钮，就会从UI中调用remove（）函数。

1.5K6 0

AngularJS XMLHttpRequest

$http.get(url) 是用于读取服务器数据的函数。废弃声明 (v1.5) v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。...通用方法实例 AngularJS1.5 以上版本 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl',...以上版本 - 实例 {{...函数 customersController 是一个标准的 JavaScript 对象构造器。控制器对象有一个属性: $scope.names。...$http.get() 从web服务器上读取静态 JSON 数据。

2.4K3 0

AngularJS 1 教程

从使用角度来说脏检查从性能角度来说脏检查指令 directive，以及用指令写组件 Promise 为什么需要前端框架随着浏览器性能提升，更多Web Page演变为Web App，特别是在中大型的项目中...，就需要一个前端框架来: 解耦应用的逻辑，数据模型，和界面视图更加方便的多人协作基本组件的抽离复用相对低成本的性能保证方便测试 …… 为什么2016年的今天仍然可以学习Angular 1 眼下潮流的框架太过于现代...必要时候使用指令 directive 指令 directive，以及用指令写组件指令是Angular中相对低层，却又非常强大的功能。...AngularJs中本身以及内置了大量的指令，例如， ng-if ， ng-repeat ，甚至ng-controller。也可以通过下面方式来自定义指令。...link 函数，如果需要接触DOM，代码在此函数中。 controller 函数，一般用作指令间的调用。

4.6K3 0

AngularJS系列之select下拉选择第一个选项为空白的解决办法

相信大家也经常遇到这种情况吧：在使用AngularJS中的select组件开发的时候，莫名其妙的第一个选项就变成空白了，而且选中其中非空白的地方，第一个选项的空白位置又奇妙的消失了。...-- 这里是重点，必须将value值设置成空字符串，否则第一个选项还是会留空白出来--> {{x.site...--注意这个地方要和下面的设置的值要一致 --> {{x.site}} }); 该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。... 从例子中就可以看出，其实就是在value中添加自己想要的值信息，然后再控制器中进行传初始值。

3.1K7 0

angularjs系列笔记（二）指令

重复HTML元素 ng-repeat指令可以重复HTML元素 //实例化应用对象，参数：模块名，空数组 var app=angular.module...("Home",[]); //调用应用对象的controller()方法，参数：控制器名，回调函数 app.controller("index",function($scope){ $scope.names...=[{name:'tsh'},{name:'tsh1'}]; }) 创建自定义指令使用.directive()函数来自定义指令，要调用自定义指令，html元素上需要添加自定义指令名...type="text/javascript"> //实例化应用对象，参数：模块名，空数组 var app=angular.module("Home",[]); //调用应用对象的directive

4072 0

AngularJS 控制器

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。...myCtrl 函数是一个 JavaScript 函数。 AngularJS 使用$scope 对象来调用控制器。在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。...在大型的应用程序中，通常是把控制器存储在外部文件中。...只需要把标签中的代码复制到名为 personController.js 的外部文件中即可： AngularJS 实例 <div ng-app="myApp" ng-controller...namesController.js: 然后，在应用中使用控制器文件: AngularJS 实例 <li ng-repeat

1.2K2 0

AngularJS简介

地址：各个 angular.js 版本下载...创建自定义的指令你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。...” }; }); 可以通过以下方式来调用指令：元素名、属性、类名、注释 restrict 属性设置指令只能通过某些方式来调用 var app = angular.module...Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。...filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。

5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭