Javascript $watch不是在angularjs中调用的
嗨,我是angular的新手,我正在尝试使用ng click指令和$watch函数进行更新。第一次单击时,它正在更新,但第二次未更新。这是我的代码,只有我的英语和一点点知识Javascript $watch不是在angularjs中调用的,javascript,angularjs,Javascript,Angularjs,嗨,我是angular的新手,我正在尝试使用ng click指令和$watch函数进行更新。第一次单击时,它正在更新,但第二次未更新。这是我的代码,只有我的英语和一点点知识 angular.module('charts', []) .factory('socket', ['$rootScope', function ($rootScope) { var safeApply = function(scope, fn) { if (scope.$$phase) {
angular.module('charts', [])
.factory('socket', ['$rootScope', function ($rootScope) {
var safeApply = function(scope, fn) {
if (scope.$$phase) {
fn(); // digest already in progress, just run the function
} else {
scope.$apply(fn); // no digest in progress, run with $apply
}
};
var socket = io.connect('http://localhost:5000/');
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
safeApply($rootScope, function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
safeApply($rootScope, function () {
if (callback) {
callback.apply(socket, args);
}
});
})
},
disconnect: function () {
socket.disconnect();
},
socket: socket
};
}])
.controller('mainCtrl',['$scope','socket', function AppCtrl ($scope, socket) {
$scope.options = {width: 500, height: 300, 'bar': 'aaa'};
$scope.data = {"angular":12,"js":15};
$scope.hovered = function(d){
$scope.barValue = d.name;
//$scope.$apply();
};
$scope.barValue = 'None';
}])
.directive('barChart', function(){
var chart = d3.custom.barChart();
return {
restrict: 'E',
replace: true,
template: '<div class="chart"></div>',
scope:{
height: '=height',
data: '=data',
hovered: '&hovered'
},
link: function(scope, element, attrs) {
var chartEl = d3.select(element[0]);
chart.on('customHover', function(d, i){
scope.hovered({args:d});
});
scope.$watch('data', function (newVal, oldVal) {
console.log(newVal);
chartEl.datum(newVal).call(chart);
});
scope.$watch('height', function(d, i){
chartEl.call(chart.height(scope.height));
})
}
}
})
.directive('chartForm', function(){
return {
restrict: 'E',
replace: true,
controller: function AppCtrl ($scope, socket) {
$scope.start = function(d, i) {
$scope.btnIsDisabled = true;
socket.on("connected",function(r){ console.log('breakpoint 1');/*console.log(r);*/ });
socket.on("new tweet", function(tweet) {
var hashtags = tweet.entities.hashtags;
if(hashtags.length) {
_.each(hashtags, function(hashtag) {
hashtag = hashtag.text.toLowerCase();
// if(hashtag == 'food' || hashtag == 'pizza' || hashtag == 'samosa') {
// console.log(hashtag);
if(_hashtags[hashtag]) {
_hashtags[hashtag]++;
}
else {
_hashtags[hashtag] = 1;
}
//}
});
}
num_tweets++;
});
};
$scope.update = function(d, i) {
$scope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest') {
if(fn && (typeof(fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
$scope.safeApply( function() {
console.log(JSON.stringify(_hashtags));
$scope.data = _hashtags;
});
};
},
template: '<div class="form">' +
'Height: {{options.height}}<br />' +
'<input type="range" ng-model="options.height" min="100" max="800"/>' +
'<br /><button ng-click="start()" ng-disabled="btnIsDisabled">Start</button>'+
'<button ng-click="update()" ng-disabled="false">Update Data</button>' +
'<br />Hovered bar data: {{barValue}}</div>'
}
});
角度模块('图表',[])
.factory('socket',['$rootScope',函数($rootScope){
var safeApply=功能(范围,fn){
如果(范围$$阶段){
fn();//摘要已经在进行中,只需运行该函数
}否则{
scope.$apply(fn);//没有正在进行的摘要,使用$apply运行
}
};
var socket=io.connect('http://localhost:5000/');
返回{
on:函数(eventName,回调){
socket.on(eventName,函数(){
var args=参数;
安全应用($rootScope,函数(){
callback.apply(套接字,args);
});
});
},
emit:函数(eventName、数据、回调){
emit(事件名、数据、函数(){
var args=参数;
安全应用($rootScope,函数(){
如果(回调){
callback.apply(套接字,args);
}
});
})
},
断开连接:函数(){
socket.disconnect();
},
插座:插座
};
}])
.controller('mainCtrl',['$scope','socket',函数AppCtrl($scope,socket){
$scope.options={宽度:500,高度:300,'bar':'aaa'};
$scope.data={“angular”:12,“js”:15};
$scope.hovered=函数(d){
$scope.barValue=d.name;
//$scope.$apply();
};
$scope.barValue='None';
}])
.directive('barChart',function(){
var chart=d3.custom.barChart();
返回{
限制:'E',
替换:正确,
模板:“”,
范围:{
高度:'=高度',
数据:'=数据',
悬停:“&悬停”
},
链接:函数(范围、元素、属性){
var chartEl=d3.选择(元素[0]);
关于('customHover',函数(d,i)的图表{
悬停({args:d});
});
范围.$watch('data',函数(newVal,oldVal){
console.log(newVal);
图表数据(newVal).call(图表);
});
范围:$watch('高度'),功能(d,i){
chartEl.call(chart.height(scope.height));
})
}
}
})
.directive('chartForm',function(){
返回{
限制:'E',
替换:正确,
控制器:函数AppCtrl($scope,socket){
$scope.start=函数(d,i){
$scope.btnIsDisabled=true;
socket.on(“已连接”,函数(r){console.log('breakpoint 1');/*console.log(r);*/});
socket.on(“新tweet”,函数(tweet){
var hashtags=tweet.entities.hashtags;
if(hashtags.length){
_.每个(标签、函数(标签){
hashtag=hashtag.text.toLowerCase();
//如果(标签='food'| |标签='pizza'| |标签='samosa'){
//log(hashtag);
if(_hashtags[hashtag]){
_标签[标签]+;
}
否则{
_hashtags[hashtag]=1;
}
//}
});
}
num_tweets++;
});
};
$scope.update=函数(d,i){
$scope.safeApply=函数(fn){
var阶段=此。$root。$$phase;
如果(阶段=='$apply'| |阶段=='$digest'){
if(fn&&(typeof(fn)=‘函数’){
fn();
}
}否则{
本条适用(fn);
}
};
$scope.safeApply(函数(){
log(JSON.stringify(_hashtags));
$scope.data=\u hashtags;
});
};
},
模板:“”+
'高度:{{options.Height}}'+ '' + “
开始”+ “更新数据”+ “
悬停条数据:{{barValue}” } });
请将您的代码缩减到最低限度。作为旁注,您不应该真正需要
safeApply
,因为您应该始终能够判断何时脱离AngularJS上下文(例如,当直接观察DOM事件时)。在适当的地方使用$apply
将使您的代码更加透明。对不起,我完全不知道这一点。我不知道为什么它没有第二次更新,但如果我传递相同的数据,它就会更新。将推文传递给此对象时,结果不会更新。提前谢谢