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

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

javascript jquery angularjs

Javascript 将$watch附加到指令中的输入字段,javascript,jquery,angularjs,directive,Javascript,Jquery,Angularjs,Directive,下面的指令旨在获取标记的值，并呈现框的确切数量。此指令需要限制为E（设计不好，但就是这样），因此我需要找到某种方法将$watch附加到输入字段下面您可以看到我的最佳尝试，或者至少是我想要完成的大致草图，但是这只会在页面最初加载时触发。alert语句不会反映对输入框中值的更改 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angula

下面的指令旨在获取

标记的值，并呈现框的确切数量。此指令需要限制为

（设计不好，但就是这样），因此我需要找到某种方法将

$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>


var-app=angular.module（“myApp”，[]）；
应用指令（“抽屉”，函数（）{
var输入=”；
var htmlCanvas=“”；
变量模板=输入+htmlCanvas；
变量链接器=函数（范围、el、属性）{
作用域$watch（el.children（）[0]，函数（v）{
警报（'值已更改，新值为：'+v）；
//将根据输入在此处进行一些画布绘制
});
};
返回{
限制：“E”，
模板：模板，
链接：链接器
};
});

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

此外，输入字段需要附加唯一的ng模型值

然后，$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>


var-app=angular.module（“myApp”，[]）；
应用指令（“抽屉”，函数（）{
var输入=”；
var htmlCanvas=“”；
变量模板=输入+htmlCanvas；
返回{
限制：“E”，
模板：模板，
控制器：功能（$scope）{
$scope.$watch（函数（）{
//更改$scope值时，返回
//您希望此观察者观察的值
返回$scope.watchedInput；
}，函数（newValue）{
//如果上面返回的值与
//上一个值时，将调用此函数
//将更改后的值作为newValue传入
警报（'值已更改，新值为：'+newValue）；
}，对）；
},
作用域：{}，
bindToController:true
};
});

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

就我个人而言，我会尝试在指令中附加一个控制器

此外，输入字段需要附加唯一的ng模型值

然后，$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>


var-app=angular.module（“myApp”，[]）；
应用指令（“抽屉”，函数（）{
var输入=”；
var htmlCanvas=“”；
变量模板=输入+htmlCanvas；
返回{
限制：“E”，
模板：模板，
控制器：功能（$scope）{
$scope.$watch（函数（）{
//更改$scope值时，返回
//您希望此观察者观察的值
返回$scope.watchedInput；
}，函数（newValue）{
//如果上面返回的值与
//上一个值时，将调用此函数
//将更改后的值作为newValue传入
警报（'值已更改，新值为：'+newValue）；
}，对）；
},
作用域：{}，
bindToController:true
};
});

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

您可以在输入上使用

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
    };

var-app=angular.module（“myApp”，[]）；
应用指令（“抽屉”，函数（）{
变量链接器=函数（范围、el、属性）{
scope.valueChanged=''；
scope.change=函数（）{
scope.valueChanged='新值为'+scope.value；
};
};
返回{
限制：“E”，
模板：“”+
“{{valueChanged}}”+
"",
链接：链接器
};

以下是一个工作示例。

您可以在输入上使用

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
    };

var-app=angular.module（“myApp”，[]）；
应用指令（“抽屉”，函数（）{
变量链接器=函数（范围、el、属性）{
scope.valueChanged=''；
scope.change=函数（）{
scope.valueChanged='新值为'+scope.value；
};
};
返回{
限制：“E”，
模板：“”+
“{{valueChanged}}”+
"",
链接：链接器
};

这是一个关于的工作示例。

你不能在指令的输入字段中使用

ng模型吗？@JanS这似乎最简单，但我似乎找不到一个有效的方法。你不能在指令的输入字段中使用ng模型吗？@JanS这似乎最简单，但我似乎找不到一个有效的方法这看起来是最好的方法。我如何将新值传递给指令的link
函数？您可以使用ng模型和修改的作用域尝试相同的方法。$watch查看观察程序函数是否会在链接函数而不是控制器中正确启动。或者您可以尝试控制器方法并将$element作为控制器注入er dependency尝试引用指令的元素这似乎是最好的方法。我如何将新值传递给指令的link
函数？您可以使用ng模型和修改的作用域尝试相同的方法。$watch查看watcher函数是否会在link函数而不是control函数中正确启动或者您可以尝试控制器方法并将$element作为控制器依赖项注入，以尝试引用指令的元素