2015-10-30 159 views
0
var slider = document.getElementById('test5'); 
noUiSlider.create(slider, { 
    start: [1366], 
    step: 1, 
    range: { 
     'min': 200, 
     'max': 1920 
    }, 
    format: wNumb({ 
     decimals: 0, 
     postfix: 'px', 
    }) 
}); 

var app = angular.module('myApp', []); 

app.controller('myWidth', function ($scope) { 
    $scope.width = inputFormat.value; 

    $scope.$watch('width', function (newValue, oldValue) { 
     console.log('Old:' + oldValue); 
     console.log('New:' + newValue); 
    }); 
    console.log($scope.width + ' - scope width'); 
}); 
var inputFormat = document.getElementById('input-format'); 
editorContainer = document.getElementById('editorContainer'); 
slider.noUiSlider.on('update', function (values, handle) { 
    inputFormat.value = values[handle]; 
    //$(editorContainer).css('width', values[handle]); 
}); 
inputFormat.addEventListener('change', function(){ 
    slider.noUiSlider.set(this.value); 
}); 

我在获取inputFormat的值时出现问题。会发生什么是我运行我的网页/应用程序和$ scope.width变量获取inputFormat的第一个值,然后停止。在inputFormat的值发生更改后,它不会继续获取值。所以我的问题是如何以$ scope.width变量更新的方式调用inputFormat变量?我是angular和javascript的新手,希望大家都能理解我的问题。谢谢您的帮助!从函数外调用变量变量

这里就是我调用$ scope.width的HTML的一部分:

<div class="" <!--id="editorContainer"--> style="position: absolute; top: 10px; bottom: 10px; right: 10px; left: 10px; width: {{width}};" 
+1

这违背角的目的。你应该只是使用双向绑定。 lookup ng-model –

+0

好吧,所以我尝试使用双向数据绑定并绑定。但是,当宽度的值改变时,div的宽度我分配ng模型({{width}})不会更新或更改。它获得一次值然后停止并且不会继续更新。你对如何改变这个问题有任何想法吗?再次,我是新的角,所以如果某件事看起来不合逻辑,那么我仍然在学习角度背后的语法和逻辑。 –

回答

0

您应该使用ng-style,然后就改变scope.width $ ..