Question

Goodevening，

以下代码似乎适用于较旧版本的Angular，但不适用于1.2版本。我不知道为什么会这样。 Angular 1.2中发生的事情是$ watch指令没有被击中。它不会执行。它确实在Angular 1.0.1中执行。

知道为什么吗？

HTML

<fieldset validatedmarker>
    <legend>User</legend>
    <input type="text" name="name" class="form-control" ng-model="name" required>
</fieldset>

和JS。

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

APP.directive('validatedmarker', function() {
    return {
        restrict: 'AE',
        scope: { },
        link: function(scope,e,a) {
            scope.$watch(function() {
                return scope.name;
            }, function(newValue, oldValue) {
                console.log("change detected: " + newValue)
            });
        }
    };
});

工作示例（Angular 1.0.1）

http://jsfiddle.net/2w8xW/

非工作示例（Angular 1.2.0）

http://jsfiddle.net/24P86/

谢谢！

Answer 1

最可能的原因是孤立范围的处理，在AngularJS 1.2.0中发生了变化

在早期版本中，directive元素中的所有内容都有了隔离范围，但现在指令中的元素获得了原始父范围。因此，当您设置scope.name的值时，您将在父范围上进行设置。手表在儿童范围内。

请参阅此SO回答AngularJS Scope differences between 1.0.x and 1.2.x和更改日志。

要使您的示例正常工作，您必须为指令创建模板，并在指令定义中设置transclude：true。

Answer 2

这是hapening的主要原因可能是因为你在一个已经很喜欢的html上创建了一个孤立的范围，因为你没有提供模板，而是使用现有的html，它最有可能被链接到父范围，所以你应该使用你的指令innerhtml并将其用作你的指令的模板喜欢

APP.directive('validatedmarker', [function() {
    return {
        restrict: 'AE',
        scope: { },
        template:'<fieldset><legend>User</legend><input type="text" name="name" class="form-control" ng-model="name" required="true"/>',
        replace:true,
        link: function(scope,e,a) {
            scope.$watch(function() {
                return scope.name;
            }, function(newValue, oldValue) {
                console.log("change detected: " + newValue)
            });
        }
    };
}]);

<div validatedmarker></div>

你可以在这里看到它

http://jsfiddle.net/24P86/1/

Answer 3

您正在指定隔离范围，但内部没有属性。您可以在指令的scope属性中添加属性，也可以在不需要隔离指令范围的情况下将其删除。

可以在此处找到有关属性的更多信息（搜索'isolate'范围）：

https://docs.angularjs.org/api/ng/service/$compile

为什么AngularJS 1.2中的代码被破坏了？

3 个答案: