首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular UI模式的作用域问题

Angular UI模式的作用域问题
EN

Stack Overflow用户
提问于 2013-09-21 03:37:42
回答 4查看 78.8K关注 0票数 80

我在理解/使用angular UI模式的作用域时遇到了问题。

虽然在这里不是很明显,但我已经正确地设置了模块和所有内容(据我所知),但这些代码样例尤其是我发现错误的地方。

index.html (其中的重要部分)

代码语言:javascript
复制
<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 (也是重要的部分)

代码语言:javascript
复制
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', function($scope, $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 (完整)

代码语言:javascript
复制
<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的body div中,但是抛出了一个错误:"Unknown provider:$modalInstanceProvider <- $modalInstance“,所以没有成功。

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

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-05-02 22:51:08

我让我的是这样工作的:

代码语言:javascript
复制
var modalInstance = $modal.open({
  templateUrl: 'partials/create.html',
  controller: 'AppCreateCtrl',
  scope: $scope // <-- I added this
});

没有表单名称,没有$parent。我使用的是AngularUI引导程序版本0.12.1。

this向我透露了这个解决方案。

票数 59
EN

Stack Overflow用户

发布于 2013-09-21 03:52:09

当涉及嵌套作用域时,不要将<input>直接绑定到作用域的成员:

代码语言:javascript
复制
<input ng-model="name" /> <!-- NO -->

将它们绑定到至少更深一层:

代码语言:javascript
复制
<input ng-model="form.name" /> <!-- YES -->

原因是作用域通常继承其父作用域。因此,当设置第一级成员时,这些成员直接在子作用域上设置,而不影响父级。与之相反,当绑定到嵌套字段(form.name)时,成员form是从父范围读取的,因此访问name属性将访问正确的目标。

请阅读更详细的描述here

票数 66
EN

Stack Overflow用户

发布于 2016-02-02 18:00:57

代码语言:javascript
复制
$scope.open = function () {

          var modalInstance = $uibModal.open({
              animation: $scope.animationsEnabled,
              templateUrl: 'myModalContent.html',
              controller: 'salespersonReportController',
              //size: size
              scope: $scope
            });

      };

适用于我的范围:$scope谢谢你Jason Swett

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18924577

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档