如何在AngularJS中使用模板外部的输出绑定组件

时间:2017-07-23 08:54:25

标签: javascript angularjs ecmascript-6 angularjs-controller angularjs-components

SAVE Button我想使用param启用或禁用按钮,使用组件中的函数,例如。如果输入字段有7个字符,则返回true并启用保存按钮。但现在我被卡住了,我无法使用param之外的test-component template

结构可以是这样的: 1. testComponent.js内的一个函数,用于检查输入字符串的长度 2.如果长度大于6,则将true传递给param变量 3.然后启用save button

之外的testComponent.js

这也是 PLUNKER

该片段中的按钮已经硬编码。

    angular
        .module('client', [])
        .component('testComponent', {
            template: '<h1>{{$ctrl.param}}</h1>',
            controller: function() {
                // this.param = '123';
            },
            controllerAs: 'vm',
            bindings: {
                param: '@'
            }
        })
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>AngularJS Example</title>

    <!-- AngularJS -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>


</head>
<body>

<div ng-app="client">
    Test
    <test-component param=true>  </test-component>

    <button ng-disabled="true">Save</button>
</div>

</body>
</html>

0 个答案:

没有答案