在AngularJS中，在控制器和指令之间共享作用域

Question

在AngularJS中，在控制器和指令之间共享作用域

angularjsangularjs-directiveangularjs-scope

8

我创建了一个指令来包装一个jQuery插件，并从控制器向指令传递一个配置对象以供插件使用。(正常工作)

在配置对象中有一个回调函数，我想在事件发生时调用它。(正常工作)

在回调函数中，我想修改控制器$scope上的属性，但这并不起作用。由于某种原因，Angular不能识别属性已更改，这使我相信回调函数中的$scope与控制器的$scope不同。我的问题是我不知道为什么。

有人能指点我正确的方向吗？

点击此处查看 Fiddle

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>

- simshaun

2个回答

2

绑定在输入框上的changeDate事件似乎是在Angular框架之外设置的。要显示该段落，请在将dateChanged设置为true后调用$scope.$apply()。要在延迟后隐藏该段落，您可以再次在传递给setTimeout的函数中使用$apply()，但最好使用Angular的$timeout()以避免进一步的问题。

Fiddle

- thisgeek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- charlietfl · Accepted Answer

你的演示中存在一些作用域问题。首先，在dateChange回调函数中，即使函数本身在控制器内声明，由于它位于bootstrap处理程序中，回调函数中this的上下文是bootstrap元素。

每当你从第三方代码中更改angular作用域值时，需要使用$apply通知angular。通常最好将所有第三方作用域保留在指令内部。

更加angular的方法是在输入框上使用ng-model，然后使用$watch来监听模型的变化。这有助于将所有代码保留在控制器内部的angular上下文中。在任何angular应用程序中，很少会不使用ng-model在任何表单控件上。

 <input type="text"  class="datepicker" datepicker="" ng-model="myDate">

指令内：

dateInput.bind('changeDate',function(){
      scope.$apply(function(){
         scope[attrs.ngModel] = element.val()
      });
});

然后在控制器中：

$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')。它在指令中被使用是多余的，在link回调函数中的element已经是实例特定的参数之一。请将dateInput替换为element.