Question

下面的指令旨在获取<input>标记的值并呈现确切的框数。这个指令需要限制在E（设计不好但它就是这样），所以看起来我需要找到一种方法将$watch附加到输入字段。

下面你可以看到我最好的尝试，或者至少是我想要完成的一般草图，但这仅在页面最初加载时触发。 alert语句不反映输入框中的值的更改。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">

<draw-boxes count="3"></draw-boxes>

<script>
var app = angular.module("myApp", []);
app.directive("drawBoxes", function() {
    var input = "<input type='text'></input>";
    var htmlCanvas = "<canvas width='800' height='800'></canvas>";
    var template = input + htmlCanvas;
    var linker = function(scope, el, attrs){
        scope.$watch(el.children()[0], function (v) {
                alert('value changed, new value is: ' + v);
                //Will do some canvas drawing here based on input
            });

    };
    return {
        restrict: "E",
        template : template,
        link: linker
    };
});
</script>

</body>
</html>

Answer 1

就个人而言，我会尝试将控制器附加到指令。

此外，输入字段需要附加一个唯一的ng-model值。

然后你的$ scope。$ watch可以在任何$ scope值发生变化时检查输入字段的值是否已更改。

这样的事情：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">

<draw-boxes count="3"></draw-boxes>

<script>
var app = angular.module("myApp", []);
app.directive("drawBoxes", function() {
    var input = "<input type='text' ng-model='watchedInput'></input>";
    var htmlCanvas = "<canvas width='800' height='800'></canvas>";
    var template = input + htmlCanvas;

    return {
        restrict: "E",
        template : template,
        controller: function($scope) {
              $scope.$watch(function() {
                  // when a $scope value is changed, return the 
                  // value you want this watcher to watch
                  return $scope.watchedInput;  
              }, function(newValue) {
                  // if the value returned above is different from the
                  // previous value, this function will be invoked
                  // passing in the changed value as newValue
                  alert('value changed, new value is: ' + newValue);
              }, true);
        },
        scope: {},
        bindToController: true
    };
});
</script>

</body>
</html>

仅供参考：我还没有测试过这段代码，但想说明这个想法。

Answer 2

您可以在输入中使用ng-change。这是一个例子：

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

app.directive("drawBoxes", function() {
    var linker = function(scope, el, attrs){
        scope.valueChanged = '';
        scope.change = function() {
           scope.valueChanged = 'new value is ' + scope.value;
        };
    };
    return {
        restrict: "E",
        template : "<input type='text' ng-change=\"change()\" ng-model=\"value\"></input>"+
        "<span>{{valueChanged}}</span>" +
        "<canvas width='800' height='800'></canvas>",
        link: linker
    };

以下是jsfiddle上的一个工作示例。

将$ watch附加到指令中的输入字段

2 个答案: