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 already in progress' を使用している、または問題が発生している場合は、 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が必要です。

click2 番目の問題:イベント でそのスコープ変数を変更した後scope.$apply()、Angular に何かが変更され、それが必要であることを知らせる必要があり$digestます。

ここで私のバージョンを確認できます。

于 2013-09-11T07:19:31.790 に答える