Question

这里我为日期选择器创建了一些示例，它工作正常，但我需要动态设置最小和最大日期..所以我传递开始和结束日期来自像这样的Html my-datepicker min =“2013-07-23”max =“2015-07-23”在指令范围内我得到了值，我需要在控制器中设置这个值$ scope.datepickerOptions = {startDate：min， endDate：max}有点像这样......

<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>

var app = angular.module('WOM', ["firebase"]);
app.controller('SampleCtrl', ['$scope', '$firebaseObject', '$firebaseAuth', function($scope, $firebaseObject, $firebaseAuth){
var ref = new Firebase('https://who-owes-me.firebaseio.com/'); //Where data is stored
var auth = $firebaseAuth(ref);

$scope.login = function() {
    $scope.authData = null;
    $scope.error = null;

    auth.$authWithOAuthPopup("google").then(function(authData){
        $scope.authData = authData;
    }).catch(function(error){
        $scope.error = error;
    });
}

$scope.data = $firebaseObject(ref); //assign data to scope

$scope.data.$loaded()
    .then(function(){
        console.log($scope.data);
    })
    .catch(function(err){
        console.error(err);
    })
}]);

Answer 1

指令控制器中的$ scope IS 指令中的隔离范围。您可以从$ scope.min和$ scope.max中获取值。

更新您的代码无法执行此操作的原因是因为您使用'='绑定会导致您的指令查找名为{{的变量1}}关于你的范围。您需要将值放在变量中，或者将绑定更改为“@”并使用插值（花括号{{value}}），或者用双引号内的单引号括住日期值，如{{1 }}

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

2013-07-23

HTML

min="'2013-07-23'" max="'2015-07-23'"

Answer 2

正如前面回答的更新注释中所提到的，它不在UPDATE上运行的原因是你将“绑定”（范围参数与“=”）绑定到字符串文字。当您尝试设置该变量时，您可能还会收到控制台错误，这是对象“非分配”的行。

话虽如此，你的指令是否需要一个孤立的范围？如果您只是使用“scope：true”设置指令，那么您的指令将原型继承父作用域。这降低了便携性，但此时看起来你并没有真正为此拍摄。

要设置有用的原型继承，您还需要在HTML视图文件中使用ng-controller的“as”语法。例如，让我们说：

ng-controller="AppCtrl as appCtl"

然后将datepickerOptions的初始化从指令移动到主AppCtrl控制器中。就个人而言，我更喜欢“dot”语法，而不是使用难以跟踪的变量乱丢范围，因此将其分配给控制器而不是范围：

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

现在在您的指令中（使用scope：true），您可以通过指令$ scope访问该控制器。所以在你的指令的控制器功能中：

$scope.datepickerOptions = $scope.appCtl.datepickerOptions

请注意，我在这里选择了“dot”语法，因为否则原型继承会在指令中为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），因为您的所有数据都已存在于控制器中，并且只需通过指令访问。

希望有所帮助！

在指令范围和控制器$ scope之间共享数据？

2 个答案: