程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular UI模式的范围问题大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决Angular UI模式的范围问题?

开发过程中遇到Angular UI模式的范围问题的问题如何解决?下面主要结合日常开发的经验,给出你关于Angular UI模式的范围问题的解决方法建议,希望对你解决Angular UI模式的范围问题有所启发或帮助;

我让我这样工作:

var modalinstance = $modal.open({
  templateUrl: 'partials/create.HTML',
  controller: 'AppCreateCtrl',
  scope: $scope // <-- I added this
});

没有表格名称,没有$parent。我正在使用AngularUI bootstrap版本0.12.1。

我通风报信该解决方案通过此。

解决方法

我在理解/使用角度UI模式的范围时遇到麻烦。

尽管这里没有立即显示出来,但我已经正确地设置了模块和所有内容(据我所知),但是这些代码示例尤其是在我发现错误的地方。

index.html(重要部分)

<div class="btn-group">
    <button class="btn dropdown-toggle btn-mini" data-toggle="dropdown">
        Actions
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right text-left">
        <li><a ng-click="addSimpleGroup()">Add Simple</a></li>
        <li><a ng-click="open()">Add Custom</a></li>
        <li class="divider"></li>
        <li><a ng-click="doBulkdelete()">Remove SELEcted</a></li>
    </ul>
</div>

Controller.js(同样是重要部分)

@H_373_5@myApp.controller('AppListCtrl',function($scope,$modal){
    $scope.name = 'New Name';
    $scope.groupType = 'New Type';

    $scope.open = function(){
        var modalInstance = $modal.open({
            templateUrl: 'partials/create.html',controller: 'AppCreateCtrl'
        });
        modalInstance.result.then(function(responsE){

            // outputs an object {name: 'Custom Name',groupType: 'Custom Type'}
            // despite the user entering customized values
            console.log('response',responsE);

            // outputs "New Name",which is fine,makes sense to me.                
            console.log('name',$scope.Name);

        });
    };
});

MyApp.controller('AppCreateCtrl',$modalInstancE){
    $scope.name = 'Custom Name';
    $scope.groupType = 'Custom Type';

    $scope.ok = function(){

        // outputs 'Custom Name' despite user entering "TEST 1"
        console.log('create name',$scope.Name);

        // outputs 'Custom Type' despite user entering "TEST 2"
        console.log('create type',$scope.groupTypE);

        // outputs the $scope for AppCreateCtrl but name and groupType
        // still show as "Custom Name" and "Custom Type"
        // $scope.$id is "007"
        console.log('scope',$scopE);

        // outputs what looks like the scope,but in this object the
        // values for name and groupType are "TEST 1" and "TEST 2" as expected.
        // this.$id is set to "009" so this != $scope
        console.log('this',this);

        // based on what modalInstance.result.then() is saying,// the values that are in this object are the original $scope ones
        // not the ones the user has just entered in the UI. no data binding?
        $modalInstance.close({
            name: $scope.name,groupType: $scope.groupType
        });
    };
});

create.html(全部)

<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">x</button>
    <h3 id="mymodalLabel">Add Template Group</h3>
</div>
<div class="modal-body">
    <form>
        <fieldset>
            <label for="name">Group Name:</label>
            <input type="text" name="name" ng-model="name" />           
            <label for="groupType">Group Type:</label>
            <input type="text" name="groupType" ng-model="groupType" />
        </fieldset>
    </form>
</div>
<div class="modal-footer">
    <button class="btn" ng-click="cancel()">Cancel</button>
    <button class="btn btn-priMary" ng-click="ok()">Add</button>
</div>

因此,我的问题是:为什么作用域未与UI双重绑定?为什么this有自定义值,但$scope没有?

我试ng-controller="AppCreateCtrl"在create.html中将它添加到主体div中,但这引发了一个错误:“未知提供程序:$
modalInstanceProvider <-$ modalInstance”,因此没有运气。

在这一点上,我唯一的选择是使用this.namethis.groupType而不是使用来传递对象$scope,但这感觉不对。

大佬总结

以上是大佬教程为你收集整理的Angular UI模式的范围问题全部内容,希望文章能够帮你解决Angular UI模式的范围问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。