Javascript 更改指令中函数参数的对象值_Javascript_Angularjs

Javascript 更改指令中函数参数的对象值

javascript angularjs

Javascript 更改指令中函数参数的对象值,javascript,angularjs,Javascript,Angularjs,我尝试在一个角度指令中创建一个函数，它应该只改变一个对象值将变量直接传递给函数不起作用： <body ng-controller="MainCtrl"> <div test ng-click="changeVar(variable.value)">{{ variable.value }}</div> </body> app.directive('test', [function(){ return { link

我尝试在一个角度指令中创建一个函数，它应该只改变一个对象值

将变量直接传递给函数不起作用：

<body ng-controller="MainCtrl">
    <div test ng-click="changeVar(variable.value)">{{ variable.value }}</div>
</body> 

app.directive('test', [function(){
    return {
        link: function(scope, elem, attrs) {
          scope.variable = {
            value : "bla"
          }; 
          scope.changeVar = function(value) {
            value = "hhuhu"
          };
        }
    }
}]);


{{variable.value}}
应用程序指令（'测试'，[函数（）{
返回{
链接：功能（范围、要素、属性）{
scope.variable={
值：“bla”
}; 
scope.changeVar=函数（值）{
value=“hhuhu”
};
}
}
}]);

但是传递父对象会：

<body ng-controller="MainCtrl">
    <div test ng-click="changeObj(variable)">{{ variable.value }}</div>
</body>


app.directive('test', [function(){
    return {
        link: function(scope, elem, attrs) {
          scope.variable = {
            value : "bla"
          }; 
          scope.changeObj = function(obj) {
            obj.value = "hhuhu"
          };
        }
    }
}]);


{{variable.value}}
应用程序指令（'测试'，[函数（）{
返回{
链接：功能（范围、要素、属性）{
scope.variable={
值：“bla”
}; 
scope.changeObj=功能（obj）{
obj.value=“hhuhuhu”
};
}
}
}]);

为什么我必须将父对象传递给函数以覆盖值，而不能直接传递值以覆盖值？我遗漏了什么吗？

我想你遗漏的是angularjs中作用域的概念以及它们是如何传递的

当您这样声明指令时：

app.directive('parent', [function(){
    return {
        controller: function($scope) {
        $scope.variable = {};
        // init
        $scope.variable.value = "foo";

        }
    }
}]);


app.directive('child', [function(){
    return {
        controller: function($scope) {

          // here you are directly using the parent's scope
          // so you can access $scope.variable directly 
          // without sending it in the function
          $scope.changeObj = function(replacement) {
            $scope.variable.value = replacement ;
          };
        }
    }
}]);

您基本上是告诉angular使用父范围作为范围，因为您没有为指令定义特殊范围

（顺便说一句，此类操作：

      scope.changeObj = function(obj) {
        obj.value = "hhuhu"
      };

不应在链接函数中，而应在控制器中，在我看来，它类似于控制器逻辑：）

您可以做的第二件事是通过参数将变量发送到子范围，如下所示：

app.directive('parent', [function(){
    return {
        controller: function($scope) {
        $scope.variable = {};
        // init
        $scope.variable.value = "foo";

        }
    }
}]);


app.directive('child', [function(){
    return {
        scope:{myVariable: '='},
        controller: function($scope) {

          // here you are directly using the child's scope
          // but since you have defined double binding,
          // changing this in the child will also update the parent
          $scope.changeObj = function(replacement) {
            $scope.myVariable.value = replacement ;
          };
        }
    }
}]);


<body ng-controller="MainCtrl">
    <div test my-variable="variable" ng-click="changeObj('some text')">{{ variable.value }}</div>
</body>

app.directive（'parent'，[function（）{
返回{
控制器：功能（$scope）{
$scope.variable={}；
//初始化
$scope.variable.value=“foo”；
}
}
}]);
app.directive（'child'，[function（）{
返回{
作用域：{myVariable:'='}，
控制器：功能（$scope）{
//在这里，您直接使用孩子的作用域
//但是既然你已经定义了双重绑定，
//在子级中更改此项也将更新父级
$scope.changeObj=功能（替换）{
$scope.myVariable.value=替换；
};
}
}
}]);
{{variable.value}}

我希望现在已经很清楚了

我想你在这里缺少的是angularjs中作用域的概念以及它们是如何传递的

当您这样声明指令时：

app.directive('parent', [function(){
    return {
        controller: function($scope) {
        $scope.variable = {};
        // init
        $scope.variable.value = "foo";

        }
    }
}]);


app.directive('child', [function(){
    return {
        controller: function($scope) {

          // here you are directly using the parent's scope
          // so you can access $scope.variable directly 
          // without sending it in the function
          $scope.changeObj = function(replacement) {
            $scope.variable.value = replacement ;
          };
        }
    }
}]);

您基本上是告诉angular使用父范围作为范围，因为您没有为指令定义特殊范围

（顺便说一句，此类操作：

      scope.changeObj = function(obj) {
        obj.value = "hhuhu"
      };

不应在链接函数中，而应在控制器中，在我看来，它类似于控制器逻辑：）

您可以做的第二件事是通过参数将变量发送到子范围，如下所示：

app.directive('parent', [function(){
    return {
        controller: function($scope) {
        $scope.variable = {};
        // init
        $scope.variable.value = "foo";

        }
    }
}]);


app.directive('child', [function(){
    return {
        scope:{myVariable: '='},
        controller: function($scope) {

          // here you are directly using the child's scope
          // but since you have defined double binding,
          // changing this in the child will also update the parent
          $scope.changeObj = function(replacement) {
            $scope.myVariable.value = replacement ;
          };
        }
    }
}]);


<body ng-controller="MainCtrl">
    <div test my-variable="variable" ng-click="changeObj('some text')">{{ variable.value }}</div>
</body>

app.directive（'parent'，[function（）{
返回{
控制器：功能（$scope）{
$scope.variable={}；
//初始化
$scope.variable.value=“foo”；
}
}
}]);
app.directive（'child'，[function（）{
返回{
作用域：{myVariable:'='}，
控制器：功能（$scope）{
//在这里，您直接使用孩子的作用域
//但是既然你已经定义了双重绑定，
//在子级中更改此项也将更新父级
$scope.changeObj=功能（替换）{
$scope.myVariable.value=替换；
};
}
}
}]);
{{variable.value}}

我希望现在大家都清楚了，javascript就是这样工作的。例如，检查这个问题：javascript就是这样工作的。例如，检查这个问题：好的，我现在明白了，非常感谢您的时间！好的，我现在明白了，非常感谢你抽出时间！