如何从外部操作组件控制器的功能
How to operate functions of component controllers from outside
我有一个组件,里面有一个功能:
app.component("myComponent", {
templateUrl: "myComponent.html",
controller: function() {
this.addApp = function (arg) {
console.log(arg);
};
}
})
我想从组件外部操作该功能:
<my-component>
</my-component>
<button type="button" ng-click="something.addApp('Cheese')"
class="btn-sm btn-default no-modal" >
Add Application
</button>
怎么做?
要访问组件控制器的功能,请使用 ng-ref
指令:
<div ng-controller="ctrl as vm">
<my-component ng-ref="vm.myComponent1">
</my-component>
<button type="button" ng-click="vm.myComponent1.addApp('Cheese')"
class="btn-sm btn-default no-modal" >
Add Application
</button>
</div>
ng-ref 指令告诉 AngularJS 将组件(或指令)的控制器分配给当前范围内给定的 属性。
如果带有ng-ref
的元素被销毁null
分配给属性.
请注意,如果要从子范围分配到父范围,则必须在父范围上初始化目标 属性,否则 ng-ref
将在子范围上分配。这通常发生在分配包含在 ng-if
或 ng-repeat
.
中的元素或组件时
使用 "controllerAs" 语法实例化控制器避免了这个问题。
有关详细信息,请参阅
注意: ng-ref
指令已添加到 AngularJS V1.7.1 Momentum-Defiance
我有一个组件,里面有一个功能:
app.component("myComponent", {
templateUrl: "myComponent.html",
controller: function() {
this.addApp = function (arg) {
console.log(arg);
};
}
})
我想从组件外部操作该功能:
<my-component>
</my-component>
<button type="button" ng-click="something.addApp('Cheese')"
class="btn-sm btn-default no-modal" >
Add Application
</button>
怎么做?
要访问组件控制器的功能,请使用 ng-ref
指令:
<div ng-controller="ctrl as vm">
<my-component ng-ref="vm.myComponent1">
</my-component>
<button type="button" ng-click="vm.myComponent1.addApp('Cheese')"
class="btn-sm btn-default no-modal" >
Add Application
</button>
</div>
ng-ref 指令告诉 AngularJS 将组件(或指令)的控制器分配给当前范围内给定的 属性。
如果带有ng-ref
的元素被销毁null
分配给属性.
请注意,如果要从子范围分配到父范围,则必须在父范围上初始化目标 属性,否则 ng-ref
将在子范围上分配。这通常发生在分配包含在 ng-if
或 ng-repeat
.
使用 "controllerAs" 语法实例化控制器避免了这个问题。
有关详细信息,请参阅
注意: ng-ref
指令已添加到 AngularJS V1.7.1 Momentum-Defiance