0

我是 Angular 的新手，正在尝试编写一些简单的应用程序。我在使用 ngSwitch 按需切换相应指令时遇到问题，如下所示。

html标记：

主 html 文件：directiveOne：

.directive('directiveOne',function(){
      return {
      restrict:"AE",
      replace:true,
      template:"<div>this is directive one</div>",
      controller:"Dir1Controller",
      }
})
.directive('directiveTwo',function(){
      return {
      restrict:"AE",
      template:"<div>this is directive 2</div>,
      controller:"Dir2Controller"
      }
})

以及在控制器之间共享数据的服务。

.factory('ShareDataFct',function($rootScope){
      var srv={};

      srv.setValue=function(value){
      this.srv.var = value;
      $rootScope.$broadcast('varChanged');

      }
      return srv;
})

最后是指令的 3 个控制器。

.controller('MainController',function($scope,ShareDataFct){
            $scope.$watch('varChanged',function(){
            $scope.myvar=ShareDataFct.var;
            })
      })
.controller('Dir1Controller',function($scope){
  //nothing to do here yet
      })
  .controller('Dir2Controller',function($scope){
  //nothing to do here yet
  })

然后我尝试更改 ShareDataFct var，但视图（ng-switch）不会更改以根据 myvar 更改显示指令。请指教。谢谢你。

4

1 回答 1

0

其实你有几个问题。

第一个：您正在使用 $rootscope.$broadcast 并尝试使用 $watch 捕获结果。

您应该使用 $scope.$on 而不是 watch。

第二：你不应该尝试使用 $rootscope、$broadcast 和 $watch 来更新变量。如果你试图这样做，那你就错了。

怎么做 ？只需直接从您的工厂共享 var。

app.factory('ShareDataFct',function(){
  var srv={};
  srv.data={};
  srv.data.value="";//init your value here
  return srv;
})

在您的控制器中，您可以像这样绑定它：

  .controller('MainController',function($scope,ShareDataFct){
        $scope.data=ShareDataFct.data;
  })

在您看来，像这样使用它：

  <div>{{data.value}}</div>

在您的 ng-switch 中：

  <div ng-switch on="data.value">
     <div ng-switch-when="Test"> This is a test</div>
     <div ng-switch-when="TestAgain"> This is a test ... again !</div>
  </div>

请注意，共享对象而不是原始值很重要，因为更新值会删除引用，并且不会在应用程序的其他部分中更新。

这是一个工作的plunker作为例子。

希望它有所帮助。

编辑：添加了 plunker

于 2015-06-26T14:59:25.047 回答