2

在以下代码中，我在单击“选项卡”元素时更改了对象的属性，但相应的 ngbind 跨度没有得到更新。我必须调用一些函数来更新视图吗？

HTML：

<html ng-app="splx">
  ...
  <body ng-controller="Application">
    <span ng-bind="obj.val"></span>
    <tabpanel selector="obj">
      <div tab value="junk">junk</div>
      <div tab value="super">super</div>
    </tabpanel>
  </body>
</html>

JS：

var cf = angular.module('splx', []);

function Application($scope) {
  $scope.obj = {val: "something"};
}

cf.directive('tabpanel', function() {
  return {
    restrict: 'AE',
    scope: {
      selector: '='
    },
    controller: ['$scope', function($scope) {}]
  };
});

cf.directive('tab', function() {
  return {
    require: '^tabpanel',
    restrict: 'AE',
    scope: true,
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        scope.$parent.selector.val = "newthing";
      });
    }
  };
});
4

2 回答 2

2 
cf.directive('tab', function() {
  return {
    require: '^tabpanel',
    restrict: 'AE',
    scope: true,
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        scope.$apply(function () {
          scope.$parent.selector.val = "newthing";
        });
      });
    }
  };
});

这对我行得通。只是缺少了一点范围。$apply 在那里。

如果您发现自己使用“$apply 已经在进行中”/遇到问题，可能想看看https://coderwall.com/p/ngisma 。

如果您想将值更改为单击的值，我会执行以下操作：

scope.$parent.selector.val = attrs.tab;

相对于：

scope.$parent.selector.val = "newthing";

然后您可以将标记更改为如下所示：

<tabpanel selector="obj">
  <div tab="junk">junk</div>
  <div tab="super">super</div>
</tabpanel>

希望有帮助！

于 2013-09-11T07:22:57.850 回答
1

第一个问题：您没有将控制器绑定到您的应用程序。你需要cf.controller('Application', Application);. 您还需要ng-controller="Application"在其父级span和tabpanel指令上的 HTML 中。

第二个问题：在您的click事件中更改该范围变量后，您需要 scope.$apply()让 Angular 知道发生了一些变化并且它需要$digest它。

你可以在这里查看我的版本。

于 2013-09-11T07:19:31.790 回答