Question

我是AngularJs的新手，当我从我的控制器“活动”时，我正试图访问“数据页”的值（寻呼机是从第三方插件生成）示例：在以下示例中，我要获取的是值：3

  <ul class="pagination pagination-sm">
    <li class="footable-page-arrow">
       <a data-page="first" href="#first">«</a>
    </li>
    <li class="footable-page active">
       <a data-page="3" href="#">4</a>
    </li>
    <li class="footable-page">
       <a data-page="0" href="#">1</a>
    </li>
    ...
    ...
  </ul>

编辑以下建议我添加了一个指令：

  .directive('dataPage', function pageDirective() { // do the name dataPage Wrong ? 

    return {
        restrict: 'A',
        link: function link(scope, element, attributes) {
            scope.page = attributes.dataPage;
            alert(scope.page);             // this one should i get the right value ?
        }
    }

})

我在控制器中添加了一个警报，只是为了知道里面是什么：

  $scope.fooFunc= function(){ 
     alert($scope.page); /*I supposed the value is now 
                           avelaible in the controller scope, still get **undefined** */
  }

Answer 1

这是非常不规则的，因为控制器不应该关心DOM。在许多方面，这条规则有助于保持控制器非常可测试。

一旦你开始关注DOM，你就会进入Angular的directive territory。

使用指令方法，我们可以使用以下内容将data-page属性分配给控制器scope：

app.directive('page', function pageDirective() {

    return {
        restrict: 'A',
        link: function link(scope, element, attributes) {
            scope.page = attributes.page;
        }
    }

});

由于scope将与控制器的范围隐式相同，因此您在指令内的scope变量上执行的任何操作都将反映在控制器上 - 只要指令在控制器的范围内 - ng-controller。

通过指定scope: true，您将为您的指令创建一个新范围，该范围可以从原型链访问控制器的范围，或者使用scope.$parent。我们还有scope: {}，它创造了一个孤立的范围，是一个完全不同的鱼。

Answer 2

你的问题确实不完整，但我会尽力回答，因为你在另一个帖子中特别要求我的帮助。

推荐：似乎可能是您正在尝试更新“活跃”＆＃39; DOM元素的状态，并根据一些分页索引更新一些数据。

您可能不需要新指令

你可能以错误的方式解决这个问题。

在Angular中，我们的想法是让你的控制器＆＃34;控制＆＃34;你所有的商业逻辑＆＃34;对于页面。＆＃34;业务逻辑＆＃34;存在＆＃34;我应该展示什么以及何时展示？＆＃34;这包括您的班级和您要显示的数据。

app.controller('MyCtrl', function($scope, someService) {
  // initialize your "data page" to something
  $scope.dataPage = 0;

  // watch for changes to dataPage
  $scope.$watch('dataPage', function(dataPage) {
    // do whatever it is you're doing to get your data.
    $scope.data = someService.getData(dataPage);
  });
});

然后在您的视图中（HTML）：

<div ng-controller="MyCtrl">
 <ul class="pagination pagination-sm">
    <li class="footable-page-arrow">
       <a data-page="first" href="#first">«</a>
    </li>
    <!-- below, use ng-class to set the active value of your li, based on 
         whatever dataPage was set to -->
    <li class="footable-page" ng-class="{ active: dataPage === 3 }">
       <a href="#" ng-click="dataPage = 3">4</a>
    </li>

    <!-- same here -->
    <li class="footable-page" nf-class="{ active: dataPage === 0 }">
       <a href="#" ng-click="dataPage = 0">1</a>
    </li>
    ...
    ...
 </ul>

 <!-- render out your data down here -->
 <pre>{{data | json}}</pre>
</div>

更高级的信息：

我上面所说的是一个快速而又肮脏的＆＃34;解决问题的方法。最理想的解决方案是通过$ location和/或路由中已解析数据的链接来利用对URL的更新来加载数据，因此您的pageData将保留在URL本身中（因此保留了前向/后退历史记录）浏览器）。解决方案看起来有点不同，并进入一些更高级的Angular主题。现在我只是在掌握上面的方法，并研究使用routing，$ location和$ routeParams来保存dataPage值。

希望这对你有所帮助，祝你好运。

Answer 3

我建议您始终使用服务/工厂在控制器和指令之间共享数据，并在两侧注入数据。

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: '',
      value2: ''
    }
  };
});

app.controller('FirstCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.directive('myDirective',['SharedService', function(SharedService){
  return{
    restrict: 'E',
    link: function(scope){
      scope.model = SharedService.sharedObject;
    },
    template: '<div><input type="text" ng-model="model.value"/></div>'
  }
}]);

这是一个显示如何完成的傻瓜： http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m

从控制器获取指令的值

3 个答案:

您可能不需要新指令

更高级的信息：