[AngularJS] 'require' prop in Directive or Component

When use ‘require‘, recommend to add some error check, for example:

class ChildCtrl {

   constructor(){

       // Get prop from parent ctrl
       if(this.parentCtrl){
            this.childProp = this.parentCtrl.prop;
       }
   }
}

app.directive(‘someDirective‘, () => {

   return {

        require: {
           ‘parentCtrl‘: ‘?^^‘
       },
       controller: ChildCtrl,
       controllerAs: ‘vm‘,
       bindToController: true,
       scope: {},
       template: require(‘./child.tpl.html‘)
   }
})

We add a if() to check whether this is parent controller, if it is then we continue do something, if not, just ignore. This can prevent if there is no parent controller, we won‘t get undefined error

[AngularJS] 'require' prop in Directive or Component

时间: 2024-10-26 21:13:39

[AngularJS] 'require' prop in Directive or Component的相关文章

angularjs取Sevice和directive的引用

取Sevice和directive的引用 3: Grab any Services We can grab a reference to any service using the injector function of element where ngApp was defined (or grab the $rootElement manually if using angular's bootstrap method): > angular.element('html').injecto

AngularJs学习笔记--Understanding the Model Component

原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以适用于单一对象代表一个实体(例如,一个叫” phones”的model,它的值是一个电话数组.)或者作为应用的全部数据Model(所有实体). 在angular中,model可以是任意数据,可以通过angular的scope对象的属性来获取model.属性的名称是model的标识,值可以是任意jav

AngularJs学习笔记--Understanding the Controller Component

原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javascript 函数(type/class),被用作扩展除了root scope在外的angular scope(http://www.cnblogs.com/lcllao/archive/2012/09/23/2698651.html)的实例.当我们或者angular通过scope.$new API(h

AngularJs(Part 11)--自定义Directive

先对自定义Directive有一个大体的映像 myModule.directive('myDirective',function(injectables){ var directiveDefinitionObject={ restrict:string, priority:number, template:string, templateUrl:string, replace:bool, transclude:bool, scope:bool or object, controller:func

AngularJS 特性—Route、Directive、Filter

Route(路由) AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中. AngularJS的前端路由,虽然URL输入不一样,页面

angular5 directive和component的区别

指令分为三类,组件,属性指令和结构性指令 组件(Component directive):UI组件,继承于Directive: 属性指令(Attribute directive):改变组件的样式: 结构指令(Structural directive):改变DOM布局: 属性指令例如 ngClass  ngStyle 结构性指令   *ngIf    *ngFor   *ngSwitch 参考自http://mttcug.cnblogs.com/

AngularJS学习笔记之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时候,就已经为指令生成了隔离作用域,现在,我们来看看绑定策略的三种形式:& .= .@. 首先是

AngularJS学习笔记之directive—scope选项与绑定策略

From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时

[AngularJS] Exploring the Angular 1.5 .component() method

Angualr 1.4: .directive('counter', function counter() { return { scope: {}, restrict: 'EA', transclude: true, bindToController: { count: '=' }, controller: function () { function increment() { this.count++; } function decrement() { this.count--; } th