All geek questions in one place

Separate data between directive scope and controller border $?

Here I created a date picker that works fine, but I need to set the minimum and maximum date dynamically .. so I go through the start and end date with Html like this my-datepicker min = "2013-07-23" max = "2015 -07-23 "in the scope of the directive, I get a value, and I need to set this value in the controller $ scope.datepickerOptions = {startDate: min, endDate: max} something like this ..

var app = angular.module('myapp', ['ng-bootstrap-datepicker'])

app.directive('myDatepicker', function() {
  return {
    restrict: 'E',
    template: '<input type="text" ng-datepicker ng-options="datepickerOptions"   ng-model="ngModel">',
    scope: {
      date: '=',
      ngModel: '=',
      min: '=',
      max: '=',
    },
    controller: function($scope) {
      $scope.datepickerOptions = {
        format: 'yyyy-mm-dd',
        autoclose: true,
        weekStart: 0,
        startDate :'2013-07-23',
        endDate:'2015-07-23'
      };
    }
  };
})

app.controller('AppCtrl', ['$scope', function ($scope) {
  $scope.date = '2013-08-12'
}]);

var appboot = angular.bootstrap(document, ['myapp']);
<link href="https://rawgit.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://rawgithub.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.js" charset="utf-8"></script>

<body>
<div>
     <div ng-app="myapp" ng-controller="AppCtrl">
      <my-datepicker ng-model ="date"  min="2013-07-23"   max="2015-07-23"></my-datepicker>
     <input id="datepickerMirror" type="text"  data-ng-model="date">
</div>
</div>
</body>
Run codeHide result
+4
source share
2 answers

$scope IS - . $scope.min $scope.max.

. , , , '=', 2013-07-23 . , "@" ( {{}}) , min="'2013-07-23'" max="'2015-07-23'".

https://plnkr.co/edit/Gp5SBtIAuLq5BzzIdKfp?p=preview

var app = angular.module('myapp', ['ng-bootstrap-datepicker'])

app.directive('myDatepicker', function() {
  return {
    restrict: 'E',
    template: '<input type="text" ng-datepicker ng-options="datepickerOptions" ng-model="ngModel">',
    scope: {
      dateval: '=',
      ngModel: '=',
      min: '=',
      max: '=',
    },
    controller: function($scope) {
      $scope.datepickerOptions = {
        format: 'yyyy-mm-dd',
        autoclose: true,
        weekStart: 0,
        startDate : $scope.min,
        endDate: $scope.max
      };
    }
  };
})

app.controller('AppCtrl', ['$scope', function ($scope) {
  $scope.dateval = '2013-08-12';
  $scope.min = '2013-07-23';
  $scope.max = '2015-07-23';
}]);

var appboot = angular.bootstrap(document, ['myapp']);

HTML

<!DOCTYPE html>
<html>

  <head>
<link href="//rawgit.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="//rawgithub.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.js" charset="utf-8"></script>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>

  </head>


<body>

<div>
     <div ng-app="myapp" ng-controller="AppCtrl">
      <my-datepicker ng-model="dateval"  min="min" max="max"></my-datepicker>
     <input id="datepickerMirror" type="text"  data-ng-model="dateval">
</div>
</div>


</body>

</html>
+1

" ", , UPDATE, , "" ( "=" ) . , , , - "non-assign".

, , ? , "scope: true", . , , .

, n- n HTML HTML . , :

ng-controller="AppCtrl as appCtl"

datepickerOptions AppCtrl. "", , , :

this.datepickerOptions = { /* min, max, etc */ }

( scope: true) $. :

$scope.datepickerOptions = $scope.appCtl.datepickerOptions

, "" , scope datepickerOptions , . (appCtl), (datepickerOptions) , .

- ngModel. , , , ng-model ( ) "appCtl.modelName", modelName - , . , . - , , AppCtrl:

// create a variable so that it can be used in callbacks where "this" changes
var _this = this;

// Create this by hand since its ng-model binding is added dynamically by the directive template
_this.modelName = null;

$scope.$watch(function() { return _this.modelName; }, function(val, oldVal)
{
   // do something here, remembering that _this contains a reference to the controller itself
});

, (datepickermirror), .

, !

0

Source: https://habr.com/ru/post/1622306/

More articles:


All Articles