Question

我是AngularJS的新手。我想通过两个数字的加法和减法将模板返回到指令。我正在通过$scope功能，但它无效。

这是代码：

<html>

<head>
    <title>Angular JS </title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body>
    <div ng-app="Compl">
        <input type=number ng-model="no1" placeholder="Enter the First Number" />
        <input type=number ng-model="no2" placeholder="Enter the First Number" />
        <NoSum></NoSum>
        <NoSub></NoSub>
    </div>
    <script>
        var app = angular.module("Compl", []);
        app.directive("NoSum", function($scope) {
            return {
                template: "Sum of Two Number" + ($scope.no1 + $scope.no2)
            };
        });
        app.directive("NoSub", function($scope) {
            return {
                template: "Sub of Two Number" + ($scope.no1 - $scope.no2)
            };
        });
    </script>
</body>

</html>

Answer 1

你能做的是

a）使用'父范围'..所以视图控制器的范围包含你的指令，所以这样：

     app.directive("NoSum",function($scope){
                return {
                template: "Sum of Two Number" + (scope.no1 + scope.no2) //<-- don't use scope with $ ... but only scope
              link: function(scope, element, attrs) {
                element.bind('error', function() {
                    if (attrs.src !== attrs.errSrc) {
                        attrs.$set('src', attrs.errSrc);
                    }
                });
            }
        };
   });

2 - 使用'隔离范围'..所以你强制通过你的项目范围如下：

     app.directive("noSum",function($scope){
                    return {
restrict:'EAC'
                    template: "Sum of Two Number" + (item.no1 + item.no2) //<-- here you use item and in html you use like: <no-sum item="myvarscoped"></no-sum>
scope:{ item : "="}
                  link: function(scope, element, attrs) {
                    element.bind('error', function() {
                        if (attrs.src !== attrs.errSrc) {
                            attrs.$set('src', attrs.errSrc);
                        }
                    });
                }
            };
       });

Answer 2

正如Vivz已经提到的那样，你无法通过范围。最佳实践是在控制器/指令之间共享数据是使用工厂。有关具体示例，请参阅this link。

Answer 3

如果您没有使用隔离范围，则应该可以直接在模板中使用no1和no2。假设那些是父范围内的变量。

<script>
    var app = angular.module("Compl", []);
    app.directive("noSum",function(){
        return{
            template : "Sum of Two Number {{(no1 + no2)}}"
        };
    });
    app.directive("noSub",function(){
        return{
            template : "Sub of Two Number {{(no1 - no2)}}"
        };
    });
</script>

您还应该重命名指令，因为大写字母在角度中具有特殊含义。因此，使用上面更改的名称，您的html应如下所示：

<no-sum></no-sum>
<no-sub></no-sub>

Here is a Plunker showing it working as expected

这是有效的，因为没有隔离范围，您的指令会继承其父级的范围，在您的情况下是$rootScope。如果您使用隔离范围，则必须通过html属性传递变量。

如何在Angular指令中传递$ scope

3 个答案: