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將被加載到它的指令ui-view的div上 –

是的男人固定!!!簡單的細節，但大麻煩！：P這是更正：'

' – Nitrof

沒有必要將該域放在templateUrl中。你也試圖從你的內部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文件，使用戶界面路由器知道在哪裏可以顯示任何嵌套模板其他模板（如Simon H評論說ng-include不需要）。

與ui-router無關，但您不需要將域名硬編碼到您的$http請求中。如果您只是編寫例如Angular將使用當前域名'/ajax_inputs'（你應該沒問題，因爲你試圖打本地主機）。如果你想擊中另一個域，然後把它放在一個可以很容易改變的變量中。

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

我只在編程時使用域，因爲服務和文件託管在arduino上。順便說一句，我真的很想學習如何把這個原因放在變種地址上......：p。另外，我嘗試在home.htm中添加'

'，但它沒有解決我的問題。 – Nitrof

閱讀評論解決方案，西蒙H解決方案工作！非常感謝各位 – Nitrof

ui-view不綁定到控制器

回答

相關問題