Question

我正在尝试创建一个简单的加载指令，我可以一遍又一遍地使用，但我似乎并没有让它工作。我有以下代码。

＆＃13;

var river = angular.module('river', []);

river.directive('riverLoading', function() {
  return {
    restrict: 'E',
    template: '<div class="text-center" style="padding-bottom: 20px;" ng-show="loading">' +
    '<i class="fa fa-fw fa-refresh fa-spin" style="margin-right: 5px;"></i> {{ message }} {{ loading }}' +
    '</div>',
    scope: {
      acessor: '=',
      message: '@'
    },
    controller: function ($scope) {
      $scope.loading = true;
      
      $scope.finished = function() {
        $scope.loading = false;
      };
    }
  }
});

river.controller('ClientController', function($scope) {
  // This is in an $http.finished.
  // $scope.loadingClients.finished(); // This does not work (why?)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="river" ng-controller="ClientController">

<river-loading acessor="loadingClients" message="Loading clients.."></river-loading>
  
</div>

＆＃13;

我怎样才能让这个工作，我做错了什么？我看到其他一些例子正在做同样的事情并且它们起作用。但是他们通常没有孤立的范围，只需要调用$ scope.finished（）;。

非常感谢您的时间和帮助！

Answer 1

你在做什么很奇怪，因为你可以使用双向绑定。但是，我认为您的问题是您需要finished函数：

$scope.acessor.finished = function() {
    $scope.loading = false;
};

即。你想在你传入的引用上绑定一个finished函数。但是，在你的指令中让你的模板看起来更简单：

template: '<div class="text-center" style="padding-bottom: 20px;" ng-show="loading.show">' +
'<i class="fa fa-fw fa-refresh fa-spin" style="margin-right: 5px;"></i> {{ message }} {{ loading }}' +
'</div>',

从指令中删除您的控制器，您的ClientController变为：

river.controller('ClientController', function($scope) {
  $scope.loading = {show: true}
  // This is in an $http.finished.
  // $scope.loadingClients.finished(); // This does not work (why?)
  $scope.loading.show = false
});

这样你就可以使用双向数据绑定。

我还会在您的示波器中使用点（＆＃39;。＆＃39;）阅读，否则您最终会遇到Javascript对象阴影问题。请参阅here。

如何从控制器调用指令函数？

1 个答案: