Question

该代码适用于双向数据绑定。但我有这个约束，不是=而是<。

当我第一次运行应用程序时，文本输入将具有初始硬编码值。我希望能够在输入中写入新值并将它们发送到控制器。

这在单向数据绑定中是否可行？

我会让我的代码更清晰。

这是我的控制者：

class DemandCtrl {
    constructor(ChartDataService) {
        this.ChartDataService = ChartDataService;
        debugger;
        this.dataa = {
            from: '10/01/2017',
            to:  '10/03/2017'
        };
    }

    $onInit() {
        getData.call(null, this);       
    }

    update() {
        getData.call(null, this);   
    }

function getData(DemandCtrl) {
    debugger;
    DemandCtrl.ChartDataService.getData(DemandCtrl.dataa).then(result => {
        DemandCtrl.result = result.data;
        getChart(result.data);
    }).catch((e) => {
        console.log(e);
    });
}

...

DemandCtrl.$inject = ['ChartDataService'];

export const Demand = {
    bindings: {
        data: '<'
    },
    templateUrl: demandPageHtml,
    controller: DemandCtrl
};

这是html页面：

<div class="demand page">        
    <rtm-nav from="$ctrl.dataa.from", to="$ctrl.dataa.to", submit="$ctrl.update()">         
    </rtm-nav>      
</div>

rtm-nav组件：

<div class="rtm-nav">
    <div ng-app>
    <form ng-submit="$ctrl.submit()">
        <label>From:
            <input type="text" name="input" ng-model="$ctrl.from">
        </label>
        <label>To:
            <input type="text" name="input" ng-model="$ctrl.to">
        </label>
        <input type="submit" id="submit" value="Apply" />
    </form> 
    </div>
</div>

这是组件的控制器。如果我将<更改为=，那么一切都可以按照我的意愿运行，但我可以在不更改的情况下进行吗？

const rtmNav = {
    bindings: {
        from:'<',
        to:'<',
        submit: '&'
    },
    controller: angular.noop,
    templateUrl: require('./rtmNav.html')
}

export default rtmNav;

Answer 1

可以使用this way完成。

在组件中，必须将对象文字添加到submit：

<div ng-app>        
        <form ng-submit="$ctrl.submit({from:$ctrl.from, to:$ctrl.to})">
            <label>From:
                <input type="text" name="input" ng-model="$ctrl.from">
            </label>
            <label>To:
                <input type="text" name="input" ng-model="$ctrl.to">
            </label>
            <input type="submit" id="submit" value="Apply" />
        </form> 
    </div>

必须将Update方法转换为如下所示：

update = (from, to) => { 

    this.dataa.from = from;
    this.dataa.to = to;   
    getData.call(null, this);

 }

在html页面的组件中必须添加from和to作为函数的参数：

<rtm-nav from="$ctrl.dataa.from" to="$ctrl.dataa.to"
         submit="$ctrl.update(from, to)"/>

Answer 2

在<input>元素上使用ng-change指令：

<div class="rtm-nav">
    <div ng-app>
    <form ng-submit="$ctrl.submit()">
        <label>From:
            <input type="text" name="input" ng-model="$ctrl.from"
                   ng-change="fromChange({$value: $ctrl.from})" />
        </label>
        <label>To:
            <input type="text" name="input" ng-model="$ctrl.to"
                   ng-change="toChange({$value: $ctrl.to})" />
        </label>
        <input type="submit" id="submit" value="Apply" />
    </form> 
    </div>
</div>

输出更改为表达式'&'绑定：

const rtmNav = {
    bindings: {
        from:'<',
        fromChange: '&',
        to:'<',
        toChange: '&',
        submit: '&'
    },
    controller: angular.noop,
    templateUrl: require('./rtmNav.html')
}

用法：

<rtm-nav from="$ctrl.dataa.from" to="$ctrl.dataa.to"
         from-change="$ctrl.dataa.from = $value"
         to-change="$ctrl.dataa.to = $value"
         submit="$ctrl.update()" >         
</rtm-nav>

从AngularJS中的表单获取数据，而不使用双向数据绑定

2 个答案: