Fatal编程技术网
  • javascript/
  • Javascript 如何基于条件实例化ng控制器

Javascript 如何基于条件实例化ng控制器

javascript angularjs

Javascript 如何基于条件实例化ng控制器,javascript,angularjs,ng-controller,Javascript,Angularjs,Ng Controller,我问了这个问题，但我问的具体问题发生了巨大的变化 我有一段代码： <div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}"> <h1 ng-click="pings.press()">asdf</h1> </div> Javascript在这里： angular.module('coolApp', []) .controller('PingsCtrl', funct

我问了这个问题，但我问的具体问题发生了巨大的变化

我有一段代码：

  <div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
    <h1 ng-click="pings.press()">asdf</h1>
  </div>
Javascript在这里：

angular.module('coolApp', [])

.controller('PingsCtrl', function() {
  var vm = this;

  vm.press = function() {alert(123)};
})
出了什么问题，我该如何解决这个问题？

只需使用服务即可。它实际上是在页面之间具有公共数据和功能的预期结构

您尝试的部分问题是，无论您是否设法保留控制器，Angular都有自己的管理，它不会跟随您，并且会在没有您的情况下刷新组件。你会遇到像
$scope
这样的问题，它实际上与你正在查看的页面不匹配，最终导致的问题超出了它的价值。

我确实有一个解决方案，但我也回应了其他人对该方法的担忧。你可能希望有一个全局控制器，你把它放在身体上，用于处理任何地方和大多数其他控制器中可能发生的事情，然后通过它进行调用。乙二醇

<body ng-controller="GlobalCtrl as gc">
    <h1 ng-click="gc.pingPress()"></h1>
</body>
不管怎样，这就是我想到的

<div ng-if="pings">
    <h1 ng-click="pings.press()">asdf</h1>
</div>
<div ng-if="!pings">
    <div ng-controller="PingsCtrl as pings">
        <h1 ng-click="pings.press()">asdf</h1>
    </div>
</div>


asdf
asdf
如果将其放置在现有PingsCtrl的内部或外部，则此操作将起作用

这是一只扑克牌

请查看我的解决方案，了解如何在控制器之间共享数据

var-app=angular.module（'myApp'，[]）；
应用控制器（“aCtrl”，功能（$scope，PingList）{
$scope.addPing=函数（）{
PingList.add（'PingA'）；
};
});
应用控制器（“bCtrl”，功能（$scope，PingList）{
$scope.addPing=函数（）{
PingList.add（'PingB'）；
};
});
应用程序工厂（'PingList'，函数（）{
变量pings=['Ping1'，'Ping2']；
返回{
添加：功能（ping）{
pings.推（ping）；
},
get:function（）{
返回ping；
}
};
});
应用指令（'pingList'，函数（pingList）{
返回{
限制：“EA”，
链接：功能（$scope）{
$scope.pings=PingList.get（）；
$scope.press=函数（ping）{
警报（ping）；
}
},
模板：'
  • {{{ping}
'
};
});

a，li{
光标：指针；
}
a{
颜色：蓝色；
文字装饰：下划线；
}



单击以添加ping
单击以添加B ping

考虑将常用功能放在工厂服务中。它们是单例的，只自动加载一次。只看一页。请理解，我使用的是Rails框架，它注入了html片段。我排除了那条信息，因为它与手头的问题无关。@user648026我也想到了这一点。我越想，这是最好的也是唯一的办法。我们只是希望通过有条件地应用
ng controller
，看看是否有其他方法。为什么不使用包含第一页或第二页的虚拟div呢？我找到了一个链接，可以根据一个条件实际实例化一个控制器，但这里的问题是，pings控制器的作用域仅限于该div及其子项，因此第二个页面将获得未定义的pings。在任何情况下，这是一个链接，你到底想实现什么？如果你从第一页到第二页进行了一次完整的页面刷新，那么你会失去所有的JS上下文或其他内容。我看到控制器会在你的Plunker演示中重新启动。是否有一种特殊的方式来演示控制器重用？此外，我会对使用全局控制器保持警惕。IIRC，他们应该被弃用和劝阻。如果你打开plunker上的控制台，你可以看到每个页面只实例化一次控制器，因为我控制台记录了实例化。此外，我并不建议使用任何不只是常规控制器的功能，而只是将其称为全局控制器。如果global意味着一个我不知道的特性，那么将其称为CommonCore作为cc。您可能需要再次检查它。它记录了“实例化”每个导航，因为每个导航都是一个新的页面加载。每个http请求仅实例化控制器一次。它没有使用角度布线，但因为OP使用的是rails，这可能就是他正在做的。没问题。即使这不是它的使用案例，学习新技巧也绝对不错；可能对其他我同意使用的服务有用。在这一点上，如何实现这一点纯粹是好奇。

<div ng-if="pings">
    <h1 ng-click="pings.press()">asdf</h1>
</div>
<div ng-if="!pings">
    <div ng-controller="PingsCtrl as pings">
        <h1 ng-click="pings.press()">asdf</h1>
    </div>
</div>