Question

我正在尝试从指令中更改父作用域属性。

这是我项目这一部分的结构（可能有助于了解发生了什么）：

-details
--overview.html
--edit.html
--main.html
-directive
--template.html
--controller.js

指令/ controller.js

restrict: 'E'
  scope: {
    mode: '@mode',  
    id: '@id'
  }, 
  replace: true,
  templateUrl: './directive/template.html',
  link: function (scope, element, attrs){
    console.log ("link function scope:", scope);
    console.log ("Parent Scope:", scope.$parent.$parent.current);
  }

指令/ template.html：

<div class="Selector">
    <div>
        <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open-{{id}}"/>
        <label class="menu-open-button" for="menu-open-{{id}}">
            <i class="zone-details-current-mode icon-mode-{{mode}}"></i>
            <span class="hamburger hamburger-1"></span>
            <span class="hamburger hamburger-2"></span>
            <span class="hamburger hamburger-3"></span>
        </label>
    </div>
</div>

我从 details / main.html 调用上述指令，如下所示：

<selector mode="{{current.mode}}" id="{{current.ID}}"></selector>

我的 app.js 路由器配置如下：

.config([
  '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app.details', {
      name: 'appDetails',
      url: '/:zoneID',
      views: {
        'appContent': {
          templateUrl: './details/main.html',
          controller: 'mainController'
        }
      }
    }).state('app.details.overview', {
      name: 'appDetailsOverview',
      url: '/overview',
      views: {
        'appContent': {
          templateUrl: './details/main.html',
          controller: 'mainController'
        },
        'zone': {
            templateUrl: './details/overview.html',
            controller: 'mainController'
        }
      }
    }).state('app.details.edit', {
      name: 'appDetailsEdit',
      url: '/edit/day/:timerEditDay',
      views: {
        'appContent': {
          templateUrl: './details/main.html',
          controller: 'mainController'
        },
        'zone': {
          templateUrl: './details/edit.html',
          controller: 'mainController'
        }
      }
    });
    $urlRouterProvider.otherwise('app/myHouse');
  }
]);

该指令应该能够做的是在单击特定按钮时更改模式。该模式位于scope.current内，但是，要访问scope.current，我不明白为什么我必须附加两个$parent。

另外，作为附注，在更改模式时，需要使用新模式“刷新”该部分。

对此有何帮助？如何使用该指令更改父范围？感谢您的任何帮助和建议

Answer 1

将模式更改为=mode以启用双向数据绑定，@将值作为字符串传递。

scope: {
    mode: '=mode',  
    id: '@id'
},

Answer 2

scope: {
    mode: '=mode',  // CHANGE THIS TO =
    id: '@id'
}, 
 // remove brackets here 
<selector mode="current.mode" id="{{current.ID}}"></selector>
// in link function
scope.mode = [new mode];

关于最后一点：在控制器中使用$ scope。$ watch。或者你可以去$ on / $ emit。检查网络上的角度事件处理非常简单。

angularjs - 使用指令更改父范围

2 个答案: