ngSwitch не обновляется при изменении модели данных

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. Пожалуйста, порекомендуйте. Спасибо.

Теги:
angularjs-directive
angularjs-ng-switch

1 ответ

0
Лучший ответ

На самом деле у вас есть несколько проблем.

1-й: вы используете $ rootscope. $ Broadcast и пытаетесь поймать результат с помощью $ watch.

Вы должны использовать $ scope. $ Вместо часов.

2nd: Вам не следует пытаться использовать $ rootscope, $ broadcast и $ watch для обновления vars. Если вы попытаетесь это сделать, вы делаете это неправильно.

Как это сделать? Просто передайте 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-переключателе:

  <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>

Обратите внимание, что важно совместно использовать объект, а не примитивное значение, поскольку обновление значения стирает ссылку и не будет обновляться в другой части приложения.

Вот пример рабочего плунжера.

Надеюсь, это помогло.

EDIT: Добавлен плункер

Поделиться
  • 0
    Спасибо за ваш быстрый ответ. Но как быть, если я захочу изменить ShareDataFct с другого контроллера, и он автоматически обновится на MainController?
  • 0
    Ага :) ! Если вы используете тот же тип привязки $ scope.data = ShareDataFct.data; в других ваших контроллерах, когда вы обновляете значение на фабрике, оно обновляет все значения, с которыми вы связались, независимо от того, где вы его связываете (контроллеры, службы, фабрики, директивы и т. д.)
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню