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