在控制器函数之外的脚本中读取AngularJS表达式

因为下面引用了

最好的做法是永远不要在控制器内使用JQuery或angular.element（）进行DOM操作。控制器仅用于我们的业务逻辑

我将一个调用

codemirr

和

JQuery

的大函数移到了控制器外部。大功能用于组合两个文本区域的内容

Html:

---

有人知道为什么脚本中的

{{area1}}

和

{{area2}}

无法识别吗？

脚本

标记似乎无法访问角度变量。请参阅以检查解决方案。
您可以这样尝试：

$scope.area1 = "initial textarea1";
$scope.area2 = "initial textarea2";
function bigfunction(area1, area2) {
  // a big function, the following is for the sake of simplicity
  return "Second: {{area1}} {{area2}}" 
}
var output = bigfunction($scope.area1, $scope.area2);
$compile(angular.element(document.querySelectorAll('#output')[0]).html(output))($scope);

app.directive('outputDir', function() {
    return {
        restrict: 'EA',
         scope: {
            area1: "=",
            area2: "="
        },
        template: '<div>Second: {{area1}}, {{area2}}</div>'    
    };
});

<div ng-app="myApp" ng-controller="myCtrl">
    <textarea ng-model="area1">area1</textarea>
    <textarea ng-model="area2">area2</textarea>
    <div>First: {{area1}}, {{area2}}</div>
    <output area1="area1" area2="area2"></output>
</div>

app.controller('myCtrl', function($scope, joiner) {
    $scope.area1 = "initial textarea1";
    $scope.area2 = "initial textarea2";
    $scope.$watchGroup(["area1", "area2"], function() {
        $scope.output = joiner.join($scope.area1, $scope.area2);
    });
});
app.service('joiner', function() {
    this.join = function(a1, a2) {
        return "Second: " + a1 + ", " + a2;
    };
});

或者，您可以尝试如下指令：

$scope.area1 = "initial textarea1";
$scope.area2 = "initial textarea2";
function bigfunction(area1, area2) {
  // a big function, the following is for the sake of simplicity
  return "Second: {{area1}} {{area2}}" 
}
var output = bigfunction($scope.area1, $scope.area2);
$compile(angular.element(document.querySelectorAll('#output')[0]).html(output))($scope);

app.directive('outputDir', function() {
    return {
        restrict: 'EA',
         scope: {
            area1: "=",
            area2: "="
        },
        template: '<div>Second: {{area1}}, {{area2}}</div>'    
    };
});

<div ng-app="myApp" ng-controller="myCtrl">
    <textarea ng-model="area1">area1</textarea>
    <textarea ng-model="area2">area2</textarea>
    <div>First: {{area1}}, {{area2}}</div>
    <output area1="area1" area2="area2"></output>
</div>

app.controller('myCtrl', function($scope, joiner) {
    $scope.area1 = "initial textarea1";
    $scope.area2 = "initial textarea2";
    $scope.$watchGroup(["area1", "area2"], function() {
        $scope.output = joiner.join($scope.area1, $scope.area2);
    });
});
app.service('joiner', function() {
    this.join = function(a1, a2) {
        return "Second: " + a1 + ", " + a2;
    };
});

app.directive（'outputDir'，function（）{
返回{
限制：“EA”，
范围：{
区域1:“=”，
区域2:“=”
},
模板：“第二个：{{area1}}，{{{area2}}”
};
});

一切都很好。
问题在于您将JavaScript与AngularJS模板混合在一起

var output = bigfunction({{area1}}, {{area2}});

您不能期望内联JavaScript使用AngularJS模板工作。发生的情况如下：加载HTML文件（模板），解析并执行内联JS。它失败是因为它包含错误的语法（
{{area1}}
）。这发生在AngularJS加载之前。另外，JavaScript代码只计算一次，因此即使模板实际上用字符串替换了
{{area1}}
，代码也不会重新计算，也不会产生不同的输出。你需要完全改变你的方法

我猜您希望在控制器外部执行两个作用域变量的连接，并可能添加额外的逻辑。您可以将代码移动到服务中，然后在控制器中使用它，或者使用指令（我不知道您的确切用例，所以我很难说哪种方法更有意义）

由于您所描述的是两个模型值的简单串联，因此一个指令似乎是有意义的。您的HTML可能如下所示：

$scope.area1 = "initial textarea1";
$scope.area2 = "initial textarea2";
function bigfunction(area1, area2) {
  // a big function, the following is for the sake of simplicity
  return "Second: {{area1}} {{area2}}" 
}
var output = bigfunction($scope.area1, $scope.area2);
$compile(angular.element(document.querySelectorAll('#output')[0]).html(output))($scope);

app.directive('outputDir', function() {
    return {
        restrict: 'EA',
         scope: {
            area1: "=",
            area2: "="
        },
        template: '<div>Second: {{area1}}, {{area2}}</div>'    
    };
});

<div ng-app="myApp" ng-controller="myCtrl">
    <textarea ng-model="area1">area1</textarea>
    <textarea ng-model="area2">area2</textarea>
    <div>First: {{area1}}, {{area2}}</div>
    <output area1="area1" area2="area2"></output>
</div>

app.controller('myCtrl', function($scope, joiner) {
    $scope.area1 = "initial textarea1";
    $scope.area2 = "initial textarea2";
    $scope.$watchGroup(["area1", "area2"], function() {
        $scope.output = joiner.join($scope.area1, $scope.area2);
    });
});
app.service('joiner', function() {
    this.join = function(a1, a2) {
        return "Second: " + a1 + ", " + a2;
    };
});

该服务可以包含您需要的任何逻辑。
您可以尝试以下方法：

<script>
    window.onload=function bigfunction() {
    var area1=angular.element(document.querySelector('[ng-controller="myCtrl"]')).scope().area1;
    var area2=angular.element(document.querySelector('[ng-controller="myCtrl"]')).scope().area2;
    result= "Second: " + area1 + ", " + area2;
    $("#output").html(output);
}
</script>


window.onload=函数bigfunction（）{
var area1=angular.element（document.querySelector（“[ng controller=“myCtrl”]”）scope（）.area1；
var area2=angular.element（document.querySelector（“[ng controller=“myCtrl”]”）scope（）.area2；
result=“Second:“+area1+”，“+area2；
$（“#输出”）.html（输出）；
}

您可以通过这种方式在javascript中检索angular js scope变量。
我认为您不能在javascript中使用
bigfunction（{area1}，{{area2}）
。
$（“#output”）.html（{area1}）
在脚本中也不起作用……是的。检查下面的答案。我想这会对你有帮助。你的意思是把
bigfunction
放在
app.controller（'myCtrl'，function（$scope）{…}）里面吗？这不是我想做的…你只能在那里做。如果您真的不想在控制器中执行此操作，请将其移动到指令。谢谢您的回答。我把这两个jsbin放在这里（，）作为记录。