Angular 指令:如何为父作用域赋值?

 
<label class="control-label">日期</label><div class="控件"><div class="control-group input-append date form_datetime"><date-time-picker data-ng-model="transaction.date"></date-time-picker>

<div class="control-group"><label class="control-label">Amount</label><div class="控件"><div class="input-append"><input type="text" name="transactionAmount" ng-model="transaction.amount" required>

我的自定义指令看起来像

angular.module('customDirectives', []).directive('dateTimePicker', function() {返回 {限制:'E'，替换:真的，范围: {交易['日期']:'='#编译错误在这里},模板:'<div class="control-group input-append date form_datetime">'+'<input type="text" readonly data-date-format="yyyy-mm-dd hh:ii" name="transactionDate" ng-model="transaction.date" data-date-time required>'+'<span class="add-on"><em class="icon-remove"></em></span>'+'<span class="add-on"><em class="icon-th"></em></span>'+'</div>',链接:函数(范围、元素、属性、ngModel){var input = element.find('input');element.datetimepicker({格式:"yyyy-mm-ddThh:ii:ssZ",showMeridian:真实，自动关闭:真，今天Btn:真的，pickerPosition: '左下'});element.bind('blur keyup change', function(){console.log('绑定元素');范围.$应用(日期)；});函数日期(){console.log('设置日期',input.val());scope.ngModel = input.val();}日期();//初始化}}});

我想将指令中的日期值分配给 $scope.transaction.date 但由于编译错误而失败，我该如何实现?

解决方案

scope: {交易['日期']:'='#编译错误在这里},

应该是

范围:{交易日期:'='},

和

<date-time-picker data-ng-model="transaction.date"></date-time-picker>

应该

然后在你的指令中你可以调用 scope.transactionDate = myValue;

在范围内.$apply();

如果你想在你的指令中使用 ng-model 那么你可以使用

....限制:'E'，要求:'?ngModel',....

还有

controller.$setViewValue(value);//这将在指令代码中设置 ng-model 绑定变量的值.

在 HTML 中

 <date-time-picker data-ng-model="transaction.date"></date-time-picker>

I have a controller AppCtrl as

scope.transaction = {}

The index looks like

  <div class="control-group">
    <label class="control-label">Date</label>

    <div class="controls">
      <div class="control-group input-append date form_datetime">
        <date-time-picker data-ng-model="transaction.date"></date-time-picker>
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Amount</label>

    <div class="controls">
      <div class="input-append">
        <input type="text" name="transactionAmount" ng-model="transaction.amount" required>
      </div>

and my custom directive looks like

angular.module('customDirectives', []).directive('dateTimePicker', function() {
      return {
        restrict: 'E',
        replace: true,
        scope: {
          transaction['date']: '=' # COMPILATION ERROR HERE
        },
        template: '<div class="control-group input-append date form_datetime">'+
          '<input type="text"  readonly data-date-format="yyyy-mm-dd hh:ii" name="transactionDate" ng-model="transaction.date" data-date-time required>'+
          '<span class="add-on"><em class="icon-remove"></em></span>'+
          '<span class="add-on"><em class="icon-th"></em></span>'+
          '</div>',
        link: function(scope, element, attrs, ngModel) {
          var input = element.find('input');

          element.datetimepicker({
            format: "yyyy-mm-ddThh:ii:ssZ",
            showMeridian: true,
            autoclose: true,
            todayBtn: true,
            pickerPosition: 'bottom-left'
          });

          element.bind('blur keyup change', function(){
            console.log('binding element');
            scope.$apply(date);
          });

          function date() {
            console.log('setting date',input.val());
            scope.ngModel = input.val();
          }

          date(); // initialize
        }
      }
  });

I want to assign the date value from my directive to $scope.transaction.date but it is failing as compilation error, how can I achieve this?

解决方案

scope: {
      transaction['date']: '=' # COMPILATION ERROR HERE
    },

Should be

scope: {
      transactionDate: '='
    },

And

<date-time-picker data-ng-model="transaction.date"></date-time-picker>

Should be

<date-time-picker transaction-date="transaction.date"></date-time-picker>

Then within your directive you can call scope.transactionDate = myValue;

within scope.$apply();

EDIT: If you want to use ng-model within your directive then you can use

....
restrict: 'E',
require: '?ngModel',
....

And

controller.$setViewValue(value); //this will in directive code where you want set the value of the ng-model bound variable.

In Html

 <date-time-picker data-ng-model="transaction.date"></date-time-picker>

这篇关于Angular 指令:如何为父作用域赋值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-24 19:19