角指令：如何使价值分配父范围是什么？ [英] Angular directive: How to make assign value to parent scope?

问题描述

我有一个控制器 AppCtrl 为

  scope.transaction = {}
 

该指数看起来像

 ＆LT; D​​IV CLASS =控制组＆GT;
    ＆LT;标签类=控制标签＆GT;日期和LT; /标签＆gt;    ＆LT; D​​IV CLASS =控制＆GT;
      ＆LT; D​​IV CLASS =控制组输入追加日期form_datetime＆GT;
        ＆LT;日期时间选取器数据-NG-模式=transaction.date＆GT;＆LT; /日期时间选取器＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =控制组＆GT;
    ＆LT;标签类=控制标签＆GT;度＆lt; /标签＆gt;    ＆LT; D​​IV CLASS =控制＆GT;
      ＆LT; D​​IV CLASS =输入追加＆GT;
        ＆LT;输入类型=文本名称=transactionAmountNG模型=transaction.amount要求＆GT;
      ＆LT; / DIV＆GT;
 

和我的自定义指令看起来像

  angular.module（'customDirectives'，[]）。指令（dateTimePicker的'，函数（）{
      返回{
        限制：'E'，
        更换：真实，
        范围： {
          交易['日期']：'='＃编译错误HERE
        }，
        模板：'＆LT; D​​IV CLASS =控制组输入追加日期form_datetime＆GT;'+
          '＆LT;输入类型=文本只读数据的日期格式=YYYY-MM-DD HH：IINAME =transactionDateNG-模式=需要transaction.date数据日期时间＆gt;'+
          '＆LT;跨度类=附加＆GT;＆LT; EM类=图标删除＆GT;＆LT; / EM＆GT;＆LT; / SPAN＆GT;'+
          '＆LT;跨度类=附加＆GT;＆LT; EM类=图标个＆GT;＆LT; / EM＆GT;＆LT; / SPAN＆GT;'+
          '＆LT; / DIV＆GT;，
        链接：功能（范围，元素，ATTRS，ngModel）{
          VAR输入= element.find（'输入'）;          element.datetimepicker（{
            格式为：YYYY-MM-DDTHH：二：SSZ
            showMeridian：真实，
            autoclose：真实，
            todayBtn：真实，
            pickerPosition：左下角
          }）;          element.bind（'模糊KEYUP变化，函数（）{
            的console.log（'绑定元素'）;
            。范围$申请（日期）;
          }）;          功能日期（）{
            的console.log（设定日期，input.val（））;
            scope.ngModel = input.val（）;
          }          日期（）; //初始化
        }
      }
  }）;
 

我想从我的指令中的日期值分配给 $ scope.transaction.date ，但未能为编译错误，我怎么能做到这一点？

解决方案

 范围：{
      交易['日期']：'='＃编译错误HERE
    }，
 

应

 范围：{
      transactionDate：'='
    }，
 

和

 ＆LT;日期时间选取器数据-NG-模式=transaction.date＆GT;＆LT; /日期时间选取器＆GT;
 

应

 ＆LT;日期时间选择器交易日期=transaction.date＆GT;＆LT; /日期时间选取器＆GT;
 

那么你的指令中，你可以调用scope.transactionDate = myvalue的;

范围内适用$（）;

编辑：如果你想使用你的指令中NG-model中，你可以使用

  ....
限制：'E'，
要求：'？ngModel'，
....
 

和

 控制器$ setViewValue（值）。 //这将指令code您想要设定的NG-模型绑定变量的值。
 

在HTML

 ＆LT;日期时间选取器数据-NG-模式=transaction.date＆GT;＆LT; /日期时间选取器＆GT;
 

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>

这篇关于角指令：如何使价值分配父范围是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！