Question

我从Jquery搬到Angular。因此我仍然将jquery代码与angular混合。在这种情况下，我想在div中添加一些html。并且还想要Angular的所有魔力。它显示此错误

ReferenceError: scope is not defined
at Scope.$scope.addTooth

这里是代码

的index.html

<div class="q">
        <span ng-repeat="i in teethSetUL" ng-click="addTooth(i.type,i.location+i.id)">
            {{i.id}}
        </span>
</div>

app.js

$scope.addTooth = function(type,id){
    if($scope.selectedTeeth.indexOf(id) == -1){

        // item is not in the array
        $scope.selectedTeeth.push(id);

        console.log($scope.selectedTeeth);
        $('.tooth-info-body').prepend($compile('<div class="col-xs-12 tooth" id="ts-'+id+'"><img src="img/tooth.png" class=" col-xs-2 img-responsive"><div class="col-xs-8"><span><b> '+ type + ' <small> ('+id+')</small></b></span><select class="form-control"><option value="metal">Metal</option><option value="ring">Ring</option><option value="rest">Rest</option><option value="ni-cr">Ni-Cr</option><option value="zirconia">Zirconia</option><option value="ceramic">Ceramic</option><option value="other">other</option></select></div><div class="col-xs-2 text-right" style="padding-top: 25px;"><a ng-click="removeTooth('+id+')" class="btn btn-default"><i class="fa fa-remove"></i></a></div></div>')(scope));
        scope.apply();
    }else{
        alert("you cannot select this again");
    }
}

Answer 1

你应该使用

$scope.$apply();

而不是

scope.apply();

Answer 2

不是使用AngularJS的反模式，而是使用ng-repeat完成，只需在一个数组中添加新添加。

<强>标记

<div class="col-xs-12 tooth" id="ts-{{obj.id}}" ng-repeat="obj in objects">
    <img src="img/tooth.png" class=" col-xs-2 img-responsive">
    <div class="col-xs-8"><span><b> {{obj.type}}<small> ({{obj.id}})</small></b></span>
        <select class="form-control">
            <option value="metal">Metal</option>
            <option value="ring">Ring</option>
            <option value="rest">Rest</option>
            <option value="ni-cr">Ni-Cr</option>
            <option value="zirconia">Zirconia</option>
            <option value="ceramic">Ceramic</option>
            <option value="other">other</option>
        </select>
    </div>
    <div class="col-xs-2 text-right" style="padding-top: 25px;"><a ng-click="removeTooth(id)" class="btn btn-default"><i class="fa fa-remove"></i></a></div>
</div>

你哪里错了？

应该是

if(!$scope.$$phase) $scope.$apply()

但是注意它被认为是坏模式。不要使用它。

Answer 3

您在范围内错过了 $ 符号并且应用了（）。

解决方案1：

请尝试以下代码

$scope.$apply();代替scope.apply()

解决方案2：

删除scope.apply()以避免一些错误代码

建议：

请验证在控制器参数中指定$scope。

Angular $ compile scope使用Jquery prepend时出错

3 个答案: