ui-view не привязывается к контроллеру

Я использую ui-router в первый раз. Я проверил некоторый учебник, но nerver смог сделать мою работу над проектом.ui-view не привязывается к контроллеру

У меня есть страница с контроллером, мой файл home.htm получите запрос, но ui-view не отображает его.

index.htm

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script> 
    <script ng-include="'http://192.168.0.110/home.htm'"></script>

 angular 
    .module('app', [ 
    'ui.router' 
]) 



.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
    .state('/', { 
     url:"/", 
     templateUrl: 'http://192.168.0.110/home.htm', 
     controller:'temperatureCTRL' 
     }) 

}]) 

    .controller('temperatureCTRL', ["$scope", "$interval", "ArduinoService", function($scope, $interval, service) { 
    var autoRefresh; 
    $scope.channels = []; 

    function startRefresh(){ 
    autoRefresh = $interval(function() { 
    updateAjax(); 
    }, 5000); 
    } 


    function updateAjax() { 
    service.getChannels(function(err, result) { 
     if (err) { 
     return alert(err); 
     } 
     // puis les mets dans le scope 
     $scope.channels = result.channels; 
    }) 
    }; 

    $scope.init = function() { //on load page first get data 
    updateAjax(); 
    startRefresh() 
    } 


    $scope.switchChannel = function($scope, channel) { // change name function 
    var switchCh = {canal : $scope.canal, status : $scope.status} 
    service.switchChannel(switchCh, function() { 
    }); 
    updateAjax(); 
    }; 

    $scope.channelsClk = function($scope, channel) { 
     var chanObj = {setPoint : $scope.setPoint, name : $scope.name, canal : $scope.canal 
     }; 
     service.putChannels(chanObj, function() { 
    }); 
    } 

    $scope.stopRefresh = function() { //ng-mousedown 
     $interval.cancel(autoRefresh); 
    }; 

    $scope.restartRefresh = function() { 
     startRefresh(); 
     console.log('lost focus'); 
    }; 

    $scope.$on('$destroy', function() { 
     // Make sure that the interval is destroyed too 
     $scope.restartRefresh(); 
    }); 
}]) 


.service('ArduinoService', ['$http', function($http) { 
    return { 
    getChannels: function(cb) { 
     $http.get('http://192.168.0.110/ajax_inputs') 
     .success(function(result) { 
      cb(null, result); 
     }); 
    }, 
    switchChannel: function(switchCh, cb) { 
     $http.put('http://192.168.0.110/switch', { 
      switchCh 
     }) 
     .success(function(result) { 
      cb(null, true); 
     }); 
    }, 

    putChannels: function(channels, cb) { 
     $http.put('http://192.168.0.110/channels', { 
      channels 
     }) 
     .success(function(result) { 
      cb(null, true); 
     }); 
    } 
    }; 
}])

Теперь home.htm

<!DOCTYPE html><!-- directive de repeat sur les données de vue channels --> 
    <div class="IO_box" ng-repeat="channel in channels"> 
    <h2>{{channel.canal}}</h2> 
    <button type="button" ng-click="switchChannel(channel, channel.canal)" ng-model="channel.status"> {{channel.status}} </button> 
    <h2> 
     <form> name:<br> 
     <input type="text" name="Name" size="6" autocomplete="off" ng-model="channel.name" ng-focus="stopRefresh()" ng-blur="restartRefresh()"> 
     <button ng-click="channelsClk(channel, channel.name)">change</button> 
    </form> 
</h2> 
    <br> 
    <h4><span class="Ainput" >{{channel.temperature}}&#186;C</span></h4> 
    <h2>Setpoint 
     <input type="number" name="setpoint" ng-model="channel.setPoint" ng-focus="stopRefresh()" ng-blur="restartRefresh()" 
     min="5" max="30" step="0.5" size="1"> &#186;C <br /> 
     <button ng-click="channelsClk(channel, channel.setPoint)">ok</button> 
</h2> 
    <h5>state: 
     <span class="permRun">{{channel.permRun}}</span> 
</h5> 
     <h5> 
      <span class="AoutputChannel">{{channel.percent_out}}%</span> 
</h5>

источник

2015-11-23 Nitrof

Ваша строка ng-include неверна. home.htm будет загружен в div с директивой ui-view на нем –

Да, человек исправлен !!! простой деталь но большой проблема !! : P это коррекция: '

' – Nitrof

Не нужно размещать домен в шаблонеUrl. Вы также пытаетесь извлечь его из своего внутреннего IP-адреса, но я думаю, что вы действительно хотите поразить localhost, который можно просто написать как http://localhost:PORT, где PORT - это любой порт, на котором работает ваш сервер.

Так что ваше определение состояния должно быть:

$stateProvider 
    .state('/', { 
     url:"/", 
     templateUrl: './home.htm', //assumes this template is in the same dir as the state definition file 
     controller:'temperatureCTRL' 
});

Кроме того, если вы хотите, чтобы отобразить другие шаблоны, которые нужно добавить <div ui-view></div> в файл home.htm так, что UI-маршрутизатор знает, где отображать любые вложенные шаблоны (как Саймон Х прокомментировал, что нет необходимости в ng-include).

Не относится к ui-router, но вам не нужно жестко указывать доменное имя в запросах $http. Угловой будет использовать текущий домен, если вы просто напишите, например. '/ajax_inputs' (что должно быть хорошо в вашем случае, потому что вы пытаетесь поразить localhost). Если вы хотите ударить другой домен, тогда поместите это в переменную, которую можно легко изменить.

getChannels: function(cb) { 
    $http.get('/ajax_inputs') 
     .then(function(result) { // .then with callback for error handling (success and error methods are being deprecated) 
      cb(null, result); 
    }, function(error) { 
     // handle error here 
    }); 
}

источник

2015-11-23 21:24:29 br3w5

Я использую этот домен только при программировании, потому что сервис и файл размещаются на ардуине. Кстати, я бы очень хотел узнать, как именно поставить на вар адрес по этой причине ...: p. Кроме того, я попытался добавить '

' в home.htm, но он не решил мою проблему. – Nitrof

читать комментарии для решения, работа по решению simon H! большое спасибо ребятам – Nitrof

ui-view не привязывается к контроллеру

ответ

Смежные вопросы