Question

看看，单击按钮，$ scope.optionis更改，但$ watch不起作用，可以在console.log中选项值，为什么？

对不起，这是我的错误，但是我使用宽度d3.js仍然是一个问题

我使用d3.js将一个rect添加到页面中，我想在单击rect时可以选择值，但是$ watch不起作用，为什么？

angular.module('myapp',[]).controller('myCtrl', function($scope){
$scope.option = '123';
$scope.d3TreeDraw = {
    source : {
        name: 'myTree'
    },
    updata: function(){
        var _self = this;

        var tree = d3.layout.tree().nodeSize([90, 60]);

        var nodes = tree.nodes(_self.source).reverse();
        nodes.forEach(function(d) { d.y = d.depth * 90; });

        var svg = d3.select("body").append("svg")
        .attr("width", 200)
        .attr("height", 200)

        var node = svg.selectAll("g.node")
        .data(nodes)

        var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .style('cursor','pointer')
        .on('click', function(d){
            console.log('click'); // can console.log
            $scope.option = '456';
            console.log($scope.option) //is change
              })

        nodeEnter.append("rect")
        .attr('width',150)
        .attr('height', 30)
        .style('fill', '#000')
    }
}
$scope.d3TreeDraw.updata();

$scope.$watch('option', function(){
    console.log('change:' + $scope.option); // when option is change,can not console.log
})
})

Answer 1

1）首先您已经 myTree.onClick() ，您的功能 onclick

因此，onClick()拼写不匹配。

将按钮更改为<button ng-click="myTree.onclick()">456</button>

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myTree.onclick()">{{data}}</button>
<br>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.data = '100';
 $scope.myTree = {
        onclick: function() {
            $scope.data = '456';
        }
    }
    $scope.$watch('data', function(){
        console.log($scope.data);
        alert($scope.data);
    })

});
</script>

</body>
</html>

＆＃13;

Here is a working DEMO.

修改

通过检查您的修改，我发现您的scope作业超出angular。

因此，您需要$apply() $scope

更改，

<强> $scope.option = '456';

要，

$scope.$apply(function() { $scope.option = '456' });

上述方法运行digest cycle manually，并对范围应用更改。

<强>性能：

如果你写$scope.$apply()它会运行complete digest cycle，这会影响performance，所以我们向$apply方法发送了一个函数，只运行了{{1}特定的`范围。

因此，您可以随时digest cycle范围。

Answer 2

试试这个

<html>
<head>
	<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
	<script>
		var app=angular.module("myapp", []);
		app.controller("namesctrl", function($scope){
			$scope.data = '123';
			$scope.$watch('data', function(){
				console.log($scope.data);
			})

			$scope.myTree = function (argument) {
					$scope.data = '456';
			}

		});

		
	</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
	<button ng-click="myTree()">456</button>
</body>
</html>

Answer 3

你在函数名中有一个大写字母

更改此

 <button ng-click="myTree.onClick()">456</button>

到这个

 <button ng-click="myTree.onclick()">456</button>

演示

＆＃13;

angular.module("app",[])
.controller("ctrl",function($scope){

  $scope.data = '123';
    $scope.$watch('data', function(){
        console.log($scope.data);
    })

    $scope.myTree = {
      
        onclick: function() { 
            $scope.data = '456';
        }
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <button ng-click="myTree.onclick()">456</button>
</div>

＆＃13;

angular $ watch不适用于d3.js

3 个答案: