angularjs

Question

我正在尝试从指令中更改父范围属性。

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

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

directive/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);
  }

directive/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。

此外，作为旁注，在更改模式时，需要 "refresh" 包含新模式的部分。

有什么帮助吗？如何使用指令更改父范围？感谢您的帮助和建议

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。在网上查看angular事件处理，很简单。

angularjs - 使用指令更改父作用域

angularjs - use directive to change parent scope

angularjs-scope

angular-directive