2

我正在研究一个接收四个参数的指令，每个参数都绑定到指令范围。

问题是该指令接收所有未定义的值，数据存在并且已加载。我考虑过数据的异步加载，但是，“页面”不是异步的，它从一开始就在范围内发布。

Plunker：http: //plnkr.co/edit/4NEciJZBFZOdJZqR1V6D

HTML：

<div ng-controller="myController">
    <itemscounter offset="dataObject.offset" limit="dataObject.limit" total="dataObject.total" page="dataObject.page"></itemscounter>
</div>

JS：

var myApp = angular.module("myApp", []);

  myApp.controller("myController", function($scope){
    $scope.dataObject = {
       offset: 1,
       limit: 20,
       total: 25,
       page: 2
    }
})

myApp.directive("itemscounter", function() {

return {
    restrict: "E",
    scope: {
        page: '=',
        total: '=',
        offset: '=',
        limit: '=' 
    },
    template: "<div>Showing products {{offset}} to {{limit}} from {{total}} (Page {{page}})</div>",
    link: function (scope, element, attrs) {

    }
}

})

任何帮助将不胜感激。

提前非常感谢，

吉列尔莫

4

2 回答 2

1

根据您的描述和示例，我看到的唯一错误是数据模型是在控制器范围之外声明的。我在 plunker 创建了一个工作版本。我唯一改变的是将数据模型移动到控制器的 $scope 中，以便它可以绑定到 Angular 的指令。

我改变了这个：

var dataObject = {
  offset: 1,
  limit: 20,
  total: 25,
  page: 2
}

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope){

})

对此：

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope){
  $scope.dataObject = {
    offset: 1,
    limit: 20,
    total: 25,
    page: 2
  };
})

我希望这有帮助。

于 2013-09-27T19:06:26.853 回答
1

将以下行添加到您的控制器。

$scope.dataObject = dataObject;

请参阅我更新的 plunker。

Angular 看不到它自己范围之外的代码。因此，该行将全局 javascript dataObject 变量添加到指令的父范围。

一到那里

    scope: {
        page: '=',
        total: '=',
        offset: '=',
        limit: '=' 
    },

指令控制器中的代码在 $scope.dataObject 变量和指令中的 page、total、offset 和 limit 变量之间进行 2 路绑定。

于 2013-09-27T19:06:31.020 回答