AngularJS指令不起作用的基本问题_Angularjs_Angularjs Directive_Angularjs Scope

AngularJS指令不起作用的基本问题

angularjs

AngularJS指令不起作用的基本问题,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我有以下html： <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <title>My AngularJS App</title> <link rel="stylesheet" href="css/app.css"/> </head> <body> <

我有以下html：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>

<div ng-controller="myCtrl">
    <cmp>
        <enhanced-textarea ng-model="name"></enhanced-textarea>
        <h3>{{name}}</h3>
        <notice></notice>
    </cmp>
</div>

<script src="lib/angular/angular.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</body>
</html>

'use strict';

angular.module('myApp', [
    'myApp.directives',
    'myApp.controllers'
]);

'use strict';

angular.module('myApp.controllers', [])
  .controller('myCtrl', ['$scope', function($scope) {
        $scope.name = 'test';
  }]);

'use strict';

angular.module('myApp.directives', [])
    .directive('cmp', function () {
        return {
            restrict: 'E',
            controller: 'cmpCtrl',
            replace: true,
            transclude: true,
            scope: {
                name: '='
            },
            template: '<div ng-transclude></div>'
        };
    })
    .controller('cmpCtrl', ['$scope', '$element', '$attrs' , function ($scope, $element, $attrs) {
        $scope.$parent.$watch('name', function (newVal) {
            if (newVal) {
                $scope.$parent.updatedSize = newVal.length;
                console.log(newVal.length);
            }
        }, true);
    }])
    .directive('enhancedTextarea', function () {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            template: '<textarea ng-transclude></textarea>'
        };
    })
    .directive('notice', function () {
        return {
            restrict: 'E',
            require: '^cmp',
            replace: true,
            scope: {
                updatedSize: '='
            },
            template: '<div>{{size}}</div>',
            link: function ($scope, $element, $attrs, cmpCtrl) {
                console.log(cmpCtrl);
                $scope.$parent.$watch('updatedSize', function (newVal) {
                    if (newVal) {
                        $scope.size = newVal;
                    }
                }, true);
            }
        };
    });

这里是controllers.js：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>

<div ng-controller="myCtrl">
    <cmp>
        <enhanced-textarea ng-model="name"></enhanced-textarea>
        <h3>{{name}}</h3>
        <notice></notice>
    </cmp>
</div>

<script src="lib/angular/angular.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</body>
</html>

'use strict';

angular.module('myApp', [
    'myApp.directives',
    'myApp.controllers'
]);

'use strict';

angular.module('myApp.controllers', [])
  .controller('myCtrl', ['$scope', function($scope) {
        $scope.name = 'test';
  }]);

'use strict';

angular.module('myApp.directives', [])
    .directive('cmp', function () {
        return {
            restrict: 'E',
            controller: 'cmpCtrl',
            replace: true,
            transclude: true,
            scope: {
                name: '='
            },
            template: '<div ng-transclude></div>'
        };
    })
    .controller('cmpCtrl', ['$scope', '$element', '$attrs' , function ($scope, $element, $attrs) {
        $scope.$parent.$watch('name', function (newVal) {
            if (newVal) {
                $scope.$parent.updatedSize = newVal.length;
                console.log(newVal.length);
            }
        }, true);
    }])
    .directive('enhancedTextarea', function () {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            template: '<textarea ng-transclude></textarea>'
        };
    })
    .directive('notice', function () {
        return {
            restrict: 'E',
            require: '^cmp',
            replace: true,
            scope: {
                updatedSize: '='
            },
            template: '<div>{{size}}</div>',
            link: function ($scope, $element, $attrs, cmpCtrl) {
                console.log(cmpCtrl);
                $scope.$parent.$watch('updatedSize', function (newVal) {
                    if (newVal) {
                        $scope.size = newVal;
                    }
                }, true);
            }
        };
    });

最后，directions.js：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>

<div ng-controller="myCtrl">
    <cmp>
        <enhanced-textarea ng-model="name"></enhanced-textarea>
        <h3>{{name}}</h3>
        <notice></notice>
    </cmp>
</div>

<script src="lib/angular/angular.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</body>
</html>

'use strict';

angular.module('myApp', [
    'myApp.directives',
    'myApp.controllers'
]);

'use strict';

angular.module('myApp.controllers', [])
  .controller('myCtrl', ['$scope', function($scope) {
        $scope.name = 'test';
  }]);

'use strict';

angular.module('myApp.directives', [])
    .directive('cmp', function () {
        return {
            restrict: 'E',
            controller: 'cmpCtrl',
            replace: true,
            transclude: true,
            scope: {
                name: '='
            },
            template: '<div ng-transclude></div>'
        };
    })
    .controller('cmpCtrl', ['$scope', '$element', '$attrs' , function ($scope, $element, $attrs) {
        $scope.$parent.$watch('name', function (newVal) {
            if (newVal) {
                $scope.$parent.updatedSize = newVal.length;
                console.log(newVal.length);
            }
        }, true);
    }])
    .directive('enhancedTextarea', function () {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            template: '<textarea ng-transclude></textarea>'
        };
    })
    .directive('notice', function () {
        return {
            restrict: 'E',
            require: '^cmp',
            replace: true,
            scope: {
                updatedSize: '='
            },
            template: '<div>{{size}}</div>',
            link: function ($scope, $element, $attrs, cmpCtrl) {
                console.log(cmpCtrl);
                $scope.$parent.$watch('updatedSize', function (newVal) {
                    if (newVal) {
                        $scope.size = newVal;
                    }
                }, true);
            }
        };
    });

“严格使用”；
angular.module（'myApp.directives'，[]）
.指令（'cmp'，函数（）{
返回{
限制：'E'，
控制器：“cmpCtrl”，
替换：正确，
是的，
范围：{
名称：'='
},
模板：“”
};
})
.controller（'cmpCtrl'，['$scope'，'$element'，'$attrs'，函数（$scope，$element，$attrs）{
$scope.$parent.$watch（'name'，函数（newVal）{
if（newVal）{
$scope.$parent.updatedSize=newVal.length；
console.log（newVal.length）；
}
}，对）；
}])
.指令（'enhancedTextarea'，函数（）{
返回{
限制：'E'，
替换：正确，
是的，
模板：“”
};
})
.指令（'通知'，功能（）{
返回{
限制：'E'，
要求：“^cmp”，
替换：正确，
范围：{
updatedSize:“=”
},
模板：“{size}}”，
链接：函数（$scope、$element、$attrs、cmpCtrl）{
控制台日志（cmpCtrl）；
$scope.$parent.$watch（'updatedSize'，函数（newVal）{
if（newVal）{
$scope.size=newVal；
}
}，对）；
}
};
});

我知道我的代码是臃肿的，但我正在修剪它。请容忍我

我不明白为什么
通知
元素中的
大小
模型属性没有更新…

完整应用程序位于github上

问题在于作用域继承，您的

enhancedTextarea

指令“作用域继承了控制器的

名称

属性，因为它是未定义的。但是，一旦您更改了textarea值，它的属性就被创建了，，之后您所更改的内容将更改该指令的scope属性

看看这个

当您在不更改文本区域的情况下检查控制台时，将不会看到作用域的

name

属性。键入内容时，将创建属性，该属性将覆盖父对象的作用域

名称属性
当您像这样更改代码时，它会起作用：
<enhanced-textarea ng-model="name"></enhanced-textarea>
<cmp>
    <h3>{{name}}</h3>
    <notice></notice>
</cmp>


{{name}}


为了创建松散耦合的代码，我建议您不要在指令中依赖$scope.$parent
。您应该尝试使用指令绑定与父属性绑定