Question

所以我有一个指令，在指令视图（html）中我放了一个控制器，但它影响了viewModel（vm）的其余部分。隔离控制器以仅控制特定viewModel的最佳方法是什么？

这是视图模型和指令的结构，我认为ng-controller =“ctrl as vm”只会在“controller”类中找到vm，而是在页面上查找每个vm。

指令：

var directive = {

        templateUrl: '/Content/app/core/scaffolding/views/popup.html',
        restrict: 'A',

        link: function (scope, element, attributes) {
          console.log('something')
        }

    };

视图：

<div class="directive">
   <div class="moreVm">
    <a href="" ng-click="vm.goSomewhere" ng-class="{true: 'red'}[vm.someClass]"></a>
  </div>
  <div class="controller" ng-controller="ctrl as vm">
      <a href="" ng-click="vm.click()"></a>
      <button ng-click="vm.find()"></button>
  </div>
</div>

我试过制作“ctrl as jvm”，但仍然是一样哈哈，这只是猜测。

<div class="controller" ng-controller="ctrl as jvm">
      <a href="" ng-click="jvm.click()"></a>
      <button ng-click="jvm.find()"></button>
  </div>

Answer 1

试试这个。

var directive = {
        restrict: "A",
        scope: true,
        bindToController: {},
        controller: "ctrl as vm",
        templateUrl: "/Content/app/core/scaffolding/views/popup.html"
    };

Answer 2

我已经提出了一个使用指令的例子，可能会有所帮助 - Plunker

如您所见，点击指令2 中的按钮不会在 directive1 中设置$scope.aValue的值。

JS

var app = angular.module('plunker', [])

    .directive("directive1", function accountDir() {
        return {
            restrict: "EA",
            templateUrl: "directive1.html",
            scope: {},
            controller: function ($scope) {
              $scope.$watch("aValue", function(newValue) {
                console.log(newValue);
              })
            }
        };
    }
    )

    .directive("directive2", function accountDir() {
        return {
            restrict: "EA",
            templateUrl: "directive2.html",
            scope: {},
            controller: function ($scope) {
              $scope.setAValue = function () {
                $scope.aValue = 42;
                console.log($scope.aValue);
              }
            }
        };
    }
    );

标记

  <body>
    <directive1></directive1>
  </body>

directive1.html

<directive2></directive2>

directive2.html

Directive2
<br>
<button ng-click="setAValue()">Set a value</button>

Answer 3

如果我没猜错，你想要当ctrl作为不同的名字，指令console.log不同的值吗？或者在vm中，但指令中的值与指令中的值不同？

如果你想先，你只需要制作两个控制器，然后设置不同的值;

controller('ctrl1',function(){ this.name});
controller('ctrl2',function(){ this.name});

否则想要两个

directive('myDir',function(){ return {restrict:'AE',scope:{},controller:function(){this.name='haha'}}})

现在该值与外部

隔离

将控制器隔离到仅控制器特定的范围

3 个答案: