Question

我有一个集合，有模型，这些模型中的每一个都在管理承诺的进度回调;使用新的时间戳更新每秒。

模型看起来像：

 Model = {
            promise: promiseObject,
            name: videoName,
            uploadProgress: timestamp
        }

myAppUploadingCardCtrl在这里引用了Collection：

angular.module('myApp.controllers')
    .controller('myAppUploadingCardCtrl', function ($scope, uploadingVideoCollection) {

    $scope.uploadingVideos = uploadingVideoCollection.collection;

});

模型在这里附加到DOM：

<div ng-controller="myAppUploadingCardCtrl">
        <my-app-uploading-card ng-repeat="video in uploadingVideos" video-name="    {{video.name}}"
                           uploading-progress="{{video.uploadProgress}}">
    </my-app-uploading-card>
</div>

myAppUploadingCard指令：

angular.module('myApp.directives')
    .directive('myAppUploadingCard', function (progressBarFactory) {

    function link(scope, element, attrs) {  

       var progressBar = element.find(.progressBar);
       function updateProgressBar(newTime) {
         progressBar.update(newTime)
       }
    }

    return {
        restrict: 'E',
        scope: {
            videoName: '@',
            uploadingProgress: '@'
        },
        templateUrl: 'views/templates/studio/videoList/uploadingCardTemplate.html',
        link: link,
        controller: function ($scope) {

        }
    }

});

我需要在每次更改时使用新的model.uploadProgress值更新指令内的元素（进度条）。例如，触发链接器函数中定义的updateProgressBar函数。基本上做一些改变了价值的东西。

我试图在指令控制器中使用$ watch执行此操作：

$scope.$watch($scope.uploadingProgress, function(e){
                console.log(e);
            })

在链接器函数中观察：

     attrs.$observe('uploadingProgress', function(e){
            console.log(e);
        })

到目前为止，对我来说没有任何效果，我需要在正确的方向上轻推。

Answer 1

您应该将uploadingProgress的指令范围属性更改为双向绑定。

...
scope: {
    videoName: '@',
    uploadingProgress: '='
}...

执行此操作，您不必在属性上设置$observe或在范围上设置$watch，一旦父控制器中的值发生更改，指令也将接收新值

编辑：我想这取决于您如何设置指令的模板，如果您在模板中直接使用$scope.uploadingProgess，则不需要$watch，例如：

<div class="progressBar" width="{{uploadProgress|someFilterPerhaps}}"></div>

或者如果您不直接使用它，那么您将需要$watch函数：

$scope.$watch('uploadingProgress',function(newVal,oldVal){
    ... do something with the new value here ...
});

编辑：以下是一个简单的演示：http://jsfiddle.net/mikeeconroy/cMYYk/2/以及一个$watch函数：http://jsfiddle.net/mikeeconroy/cMYYk/3/

如何从我的自定义指令中响应模型更改？

1 个答案: