我创建了一个包装jQuery插件的指令,并将该插件的配置对象从控制器传递到指令。(作品)
在配置对象中是一个我想在事件上调用的回调。(作品)
在回调中,我想修改控制器的$ scope上的属性,该属性 不起作用 。Angular无法识别出该属性由于某种原因而发生了变化,这使我相信回调中的$ scope与控制器的$ scope不同。我的问题是我不明白为什么。
有人能指出我正确的方向吗?
单击此处获取小提琴
app.js
var app = angular.module('app', []) .directive('datepicker', function () { return { restrict: 'A', link: function (scope, element, attrs) { // Uncommenting the line below causes // the "date changed!" text to appear, // as I expect it would. // scope.dateChanged = true; var dateInput = angular.element('.datepicker') dateInput.datepicker(scope.datepickerOpts); // The datepicker fires a changeDate event // when a date is chosen. I want to execute the // callback defined in a controller. // --- // PROBLEM: // Angular does not recognize that $scope.dateChanged // is changed in the callback. The view does not update. dateInput.bind('changeDate', scope.onDateChange); } }; }); var myModule = angular.module('myModule', ['app']) .controller('MyCtrl', ['$scope', function ($scope) { $scope.dateChanged = false; $scope.datepickerOpts = { autoclose: true, format: 'mm-dd-yyyy' }; $scope.onDateChange = function () { alert('onDateChange called!'); // ------------------ // PROBLEM AREA: // This doesnt cause the "date changed!" text to show. // ------------------ $scope.dateChanged = true; setTimeout(function () { $scope.dateChanged = false; }, 5000); }; }]);
html
<div ng-controller="MyCtrl"> <p ng-show="dateChanged">date changed!</p> <input type="text" value="02-16-2012" class="datepicker" datepicker=""> </div>
演示中有许多示波器问题。首先,在dateChange回调中,即使函数本身是在控制器内部声明的,this回调中的上下文也是bootstrap元素,因为它位于bootstrap处理程序中。
dateChange
this
每当您从第三方代码中更改角度范围值时,角度都需要使用来了解它$apply。通常最好将所有第三方作用域保留在指令中。
$apply
ng- model输入上将使用更多角度的方法。然后$.watch用于更改模型。这有助于将控制器内的所有代码保持在角度范围内。在任何角度应用程序中都很少在ng- model任何窗体控件上使用
ng- model
$.watch
<input type="text" class="datepicker" datepicker="" ng-model="myDate">
内指令:
dateInput.bind('changeDate',function(){ scope.$apply(function(){ scope[attrs.ngModel] = element.val() }); });
然后在Controller中:
$scope.$watch('myDate',function(oldVal,newVal){ if(oldVal !=newVal){ /* since this code is in angular context will work for the hide/show now*/ $scope.dateChanged=true; $timeout(function(){ $scope.dateChanged=false; },5000); } });
演示:http://jsfiddle.net/qxjck/10/
编辑var dateInput = angular.element('.datepicker')如果要在页面中的多个元素上使用此指令,则应删除的另一项内容是。在指令中使用多余的指令,其中where 已经是回调element中的参数之一link,并且是特定于实例的。替换dateInput为element
var dateInput = angular.element('.datepicker')
element
link
dateInput